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:
- Remove the entire topical-app directory.
- In the parent directory, I removed package-lock.json and edited package.json, changing this line: "react-scripts": "4.0.3".
- I removed the entire node_modules subdirectory as well.
- Now, I started over with npm install which recreated node_modules and package-lock.json.
- Next, I created a basic React app with npx create topical-app.
- I then moved down to the new subdirectory topical-app and reinstalled my React libraries with npm i typescript react-router-dom history axios jwt-decode joi-browser react-toastify react-linkify bcrypt config jsonwebtoken react-uuid moment react-moment react-bootstrap react-icons react-hook-form.
- Next, I restored my .env file which, among other things, sets the port React runs on.
- Finally, I restored my actual web app using Git. (For me, having previously made sure that .gitignore was not tracking node_modules, all I had to was discard changes which restored my public and src directories.)
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.