Can't resolve 'fs' in Laravel + Vue Project - node.js

please help me with this problem.
i tried to implement 'fs' dependency in vue laravel file.
i installed the dependency using npm i fs
and i add this line to include the library inside my app.vue file
const fs = require('fs');
but when i run the npm run hot, i got this error
ERROR in ./resources/js/vue/app.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5[0].rules[0].use[0]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./resources/js/vue/app.vue?vue&type=script&lang=js&) 235:15-28 Module not found: Error: Can't resolve 'fs' in 'C:\laragon\www\cms-laravel\resources\js\vue'
i tried to look for the solution and it looks like i need to add these lines to my webpack.mix.js
mix.webpackConfig({ node: { fs: 'empty' }})
So i did, but now got another error like this.
Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
configuration.node has an unknown property 'fs'. These properties are valid:
object { __dirname?, __filename?, global? }
-> Options object for node compatibility features.
and i dont think that i found any solution for this... please help me...
Here's my dependecies in package.json
"dependencies": {
"fs": "0.0.1-security",
"vue": "^2.6.14"
}

Related

How to solve Module not found: Error: Can't resolve 'fs' without overriding webpack config

I have a react app and all of a sudden I got the below errors while I run npm start:
ERROR in ./node_modules/sass/sass.dart.js 118:12-25
Module not found: Error: Can't resolve 'fs' in .......
webpack compiled with 1 error and 1 warning
I manage to handle it with adding fallback to webpack.config.js like below:
.....
resolve: {
// This allows you to set a fallback for where webpack should look for modules.
// We placed these paths second because we want `node_modules` to "win"
// if there are any conflicts. This matches Node resolution mechanism.
// https://github.com/facebook/create-react-app/issues/253
fallback:{
"fs":false
},
}
it solved the problem but I don't want to override webpack.config.js because if I remove my node modules and some one else tries to npm install then he will get the error again.
how can I solve the error without overriding webpack.config.js?

Module not found: Can't resolve 'child_process', Module not found: Can't resolve 'http2'

I am trying to create a web-page using nodeJS and nextJS that stores documents on google drive. For this I installed the NPM module "googleapis" but when I import this module in my particular JS file it throws an error as mentioned below,
./node_modules/google-auth-library/build/src/auth/googleauth.js:17:0
Module not found: Can't resolve 'child_process'
Import trace for requested module:
./node_modules/google-auth-library/build/src/index.js
./node_modules/googleapis/build/src/index.js
To solve this error I have tried the below solution and this method resolved my issue, I have added this below solution in next.config.js
webpack: (config, { isServer }) => {
if (!isServer) {
config.resolve.fallback = {
fs: false,
path: false,
child_process: false,
}
}
return config
},
This solution solved my issue but throws another error as mentioned below,
./node_modules/googleapis-common/build/src/http2.js:16:0
Module not found: Can't resolve 'http2'
Did you mean './http2'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.
Import trace for requested module:
./node_modules/googleapis-common/build/src/apirequest.js
./node_modules/googleapis-common/build/src/index.js
./node_modules/googleapis/build/src/index.js
This http2 module is deprecated by NPM.
How to resolve this http2 module issue or does anyone know that how to tackle this child_process issue?

Cannot use import statement outside a module with #pusher/push-notifications-web nodejs - beams

I am trying to follow this tutorial using nodejs and express: https://pusher.com/docs/beams/reference/web/#npm-yarn
First I did: npm install #pusher/push-notifications-web before adding the code.
But when I add this code in the index.js file:
import * as PusherPushNotifications from "#pusher/push-notifications-web";
const beamsClient = new PusherPushNotifications.Client({
instanceId: "<YOUR_INSTANCE_ID_HERE>",
});
beamsClient.start().then(() => {
// Build something beatiful 🌈
});
I get this error:
SyntaxError: Cannot use import statement outside a module
It's also not very clear to me from the tutorial if the code has to be in the frontend or the backend. I tried both but got the same result.
How can I fix this problem?
The error is caused by the fact that you're trying to use ES module specific features in a regular CommonJS file (the default behavior in Node.js). However, what you're looking at is the Web SDK for Pusher which won't help you achieve your goals.
You need the server SDK for Node.js - https://pusher.com/docs/beams/reference/server-sdk-node/.
Verify that you have the latest version of Node.js installed and you have 2 ways of fixing that
Set "type" field with a value of "module" in package.json. This will ensure that all .js and .mjs files are interpreted as ES modules.
// package.json
{
"type": "module"
}
Use .mjs as file extension instead of .js.

how to solve the error that fs module is not found when used react and next.js

Am using a react application without router settings. I want to build my sitemap.xml file. I tried some modules like sitemap.js, react-router-sitemap, sitemap-generator. But these module are throwing error as fs module is missing. I installed fs module via npm install --save. But it is still showing the error.
I found in some forums to add the below code in webpack.config file.
node: {
fs: "empty"
}
Am not sure where this file is. I couldn't find them nside the sitemap related modules.
Please help me to resolve this. Am new to react.
Here is my folder structure.
create next.config.js and put below code. It works fine for me.
next.config.js
module.exports = {
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
// Note: we provide webpack above so you should not `require` it
// Perform customizations to webpack config
// Important: return the modified config
// Example using webpack option
//config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//))
config.node = {fs:"empty"}
return config
},
webpackDevMiddleware: config => {
// Perform customizations to webpack dev middleware config
// Important: return the modified config
return config
},
}

Nodemailer: require is not defined

I have a problem using Nodemailer. These are the instructions I follow: http://www.nodemailer.com/docs/install
I'm using Grunt server.
Step 1
I start writing this command inside my project folder:
npm install nodemailer --save
And everything seems to be working, the nodemailer folder appears inside node_modules folder and inside package.json I have this line of code:
"dependencies": {
"nodemailer": "^0.6.3"
},
Step 2
I try to reference to the nodemailer by writing this inside my javascript file:
var nodemailer = require("nodemailer");
Error
But then I get this error: Uncaught ReferenceError: require is not defined
Other methods
I have also tryed to do the following:
require("nodemailer.js");
require("/..path.../nodemailer.js");
But nothing seems to work.
Have anyone any idea why I can't access nodemailer? Please keep in mind that I'm new to javascript. Thank you :)

Resources