Why I am not using React Scripts 5
posted 2022.01.11 by Clark Wilkins, Simplexable

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:

  1. Remove the entire topical-app directory.
  2. In the parent directory, I removed package-lock.json and edited package.json, changing this line: "react-scripts": "4.0.3".
  3. I removed the entire node_modules subdirectory as well.
  4. Now, I started over with npm install which recreated node_modules and package-lock.json.
  5. Next, I created a basic React app with npx create topical-app.
  6. 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.
  7. Next, I restored my .env file which, among other things, sets the port React runs on.
  8. 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.