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

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.

node.jsreactjswebpackfswebpack-4


Solution 1:[1]

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.

Solution 2:[2]

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 [email protected]) "sass-loader": "^10.0.0"

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Quentin
Solution 2 Cris Tecelo

Related Questions