Why I am not using React Scripts 5 Clark Wilkins, Simplexable 2022.01.11
Earlier today, a project I am working on in React completely shut down after a fresh compilation. I had numerous errors on the screen including:
Compiled with problems:
ERROR in ./node_modules/destroy/index.js 12:17-41
Module not found: Error: Can't resolve 'fs' in
'/Library/WebServer/Documents/topical2/js/topical-app/node_modules/destroy'
ERROR in ./node_modules/etag/index.js 20:12-31
Module not found: Error: Can't resolve 'fs' in
'/Library/WebServer/Documents/topical2/js/topical-app/node_modules/etag'
ERROR in ./node_modules/express/lib/request.js 18:11-30
Module not found: Error: Can't resolve 'net' in
'/Library/WebServer/Documents/topical2/js/topical-app/node_modules/express/lib'
etc...
After some research, it turned out that the project had just recompiled to be Webpack 5.0, and this is "normal" due to a number of "breaking changes". I spent several hours trying to become compatible, which requires edits in js/[your-app]/node_modules/react-scripts/config/webpack.config.js something like this (in the "resolve" section):
fallback: {
"assert": require.resolve("assert/"),
"crypto": require.resolve("crypto-browserify"),
"http": require.resolve("stream-http"),
"path": require.resolve("path-browserify"),
"stream": require.resolve("stream-browserify"),
"util": require.resolve("util/"),
"zlib": require.resolve("browserify-zlib")
},
This also required installing the above, but, unfortunately, it still would not work because nothing I could find on the Web got around the fs error shown above.
Ultimately, I had to force the project to reinstall with Webpack v4.0.3 as follows:
After npm start finished, I was back on Webpack 4.0.3 with no compile errors. I hope this example helps someone else out as well.