React - Module not found: Error: Can't resolve 'fs' in.. and can't resolve 'net' in

user_11854570 0
Viewed 4692

new to webpack configurations. I'm getting this error in my app and it doesn't compile. According to countless suggestions from SO, I've tried the setting (or variations of it) in my package.json:

"browser": {
        "fs": false,
        "net": false
         }

And in webpack.config:

 node: { fs: 'empty', 
         net: 'empty' }

It compiles but all it does is it has the file go blank on localhost.

Webpack version: 4.46.0 Node: 16.14.0 Windows 11

Any help greatly appreciated.

webpack-4 webpack reactjs fs node.js
2 Answers

Webpack will let you bundle up modules of browser-compatible code into a production bundle for sending to the browser.

The fs and net modules are not browser-compatible code. They depend on APIs which are provided by Node.js and which are not provided by browsers.

Thus attempts to bundle them error, and if you tell webpage to treat them as empty then the generated bundle won't include them.

Dorward_190680

It took me while to figure it out and I found out that it may be due to incompatible Node-gyp and Node-sass packages.My app is running fine now.

Again, the errors:

"Module not found: Error Can't resolve "fs" in..." "Module not found: Error Can't resolve "net" in..."

Try this in the following order :

  1. Delete package.lock.json

  2. Update/install these packages to make them compatible with each other.

These versions worked for Node 16.14.0:

"node-sass": "^6.0.0"
"node-gyp": "^7.1.0" (in my case - npm install -g node-gyp@7.1.0) "sass-loader": "^10.0.0"

user_118545700
Related