Why I am not using React Scripts 5
Clark Wilkins, Simplexable
2022.01.11
<p>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:</p>

<blockquote><pre>Compiled with problems:<br />
<br />
ERROR in ./node_modules/destroy/index.js 12:17-41<br />
<br />
Module not found: Error: Can't resolve 'fs' in <br />'/Library/WebServer/Documents/topical2/js/topical-app/node_modules/destroy'<br />
<br />
<br />
ERROR in ./node_modules/etag/index.js 20:12-31<br />
<br />
Module not found: Error: Can't resolve 'fs' in <br />'/Library/WebServer/Documents/topical2/js/topical-app/node_modules/etag'<br />
<br />
<br />
ERROR in ./node_modules/express/lib/request.js 18:11-30<br />
<br />
Module not found: Error: Can't resolve 'net' in<br /> '/Library/WebServer/Documents/topical2/js/topical-app/node_modules/express/lib'<br />
<br />
etc...</pre></blockquote>

<p>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 <tt>js/[your-app]/node_modules/react-scripts/config/webpack.config.js</tt> something like this (in the "resolve" section):</p>


<blockquote><pre><br />
fallback: { <br />
 "assert": require.resolve("assert/"),<br />
 "crypto": require.resolve("crypto-browserify"),<br />
 "http": require.resolve("stream-http"),<br />
 "path": require.resolve("path-browserify"),<br />
 "stream": require.resolve("stream-browserify"),<br />
 "util": require.resolve("util/"),<br />
 "zlib": require.resolve("browserify-zlib") <br />
},</pre></blockquote>

<p>This also required installing the above, but, unfortunately, it still would not work because <u>nothing</u> I could find on the Web got around the <tt>fs</tt> error shown above.</p>

<p>Ultimately, I had to <u>force</u> the project to reinstall with Webpack v4.0.3 as follows:</p>

<ol>
<li>Remove the entire <tt>topical-app</tt> directory.</li>
<li>In the parent directory, I removed <tt>package-lock.json</tt> and edited <tt>package.json</tt>, changing this line: <tt>"react-scripts": "4.0.3"</tt>.</li>
<li>I removed the entire <tt>node_modules</tt> subdirectory as well.</li>
<li>Now, I started over with <tt>npm install</tt> which recreated <tt>node_modules</tt> and <tt>package-lock.json</tt>.</li>
<li>Next, I created a basic React app with <tt>npx create topical-app</tt>.</li>
<li>I then moved down to the new subdirectory <tt>topical-app</tt> and reinstalled my React libraries with <tt>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</tt>.</li>
<li>Next, I restored my <tt>.env</tt> file which, among other things, sets the port React runs on.</li>
<li>Finally, I restored my actual web app using Git. (For me, having previously made sure that <tt>.gitignore</tt> was not tracking <tt>node_modules</tt>, all I had to was discard changes which restored my <tt>public</tt> and <tt>src</tt> directories.)</li>
</ol>

<p>After <tt>npm start</tt> finished, I was back on Webpack 4.0.3 with no compile errors. I hope this example helps someone else out as well.</p>