How to fix the "no such file or directory" warning in node_modules in Wagmi

In this tutorial, we are going to learn how to fix the "ENOENT: no such file or directory" and "failed to parse source map" warnings in the node_modules that appear when using Wagmi.

This problem happens when using Create-react-app and Webpack 5 after installing Wagmi and Ethers JS.

The Create-react-app team is actively working on a fix that you can check see here:

fix: ignore webpack warnings by source-map-loader by Bnaya · Pull Request #11752 · facebook/create-react-app

Some third party packages may ship miss-configured sourcemaps, that interrupts the buildSee: #11278 (comment)To trigger the error, simply install “stylis-plugin-rtl@2.1.1”add import {} from “sty...

GitHubfacebook

In the meantime, you can hide the warnings by disabling generating source maps.

For that, you need to add an environment variable called GENERATE_SOURCEMAP and set it to false.

So you have 2 options:

• Add this to the .env file in your app: GENERATE_SOURCEMAP=false. If you don't have a .env file in your React project, you'll need to create one.
• Inside the package.json file, find the start script and
  replace: "start": "react-scripts start",
  with: "start": "GENERATE_SOURCEMAP=false react-scripts start",

Now when you restart the app, the warnings should have disappeared.

For your information, source maps are files that map minified or transformed script file back to an unbuilt state. When developing locally, it's very unlikely that you are minifying your code so you can just disable generating source maps.

And that's it 🎉

Thank you for reading this article