Migrating to Webpack 5 with Next.js 10.2 yields `Module not found: Can't resolve X` for custom env variables, and `Module not found: Can't resolve 'fs'`

Bug report

I’m migrating my Next.js app from 10.1.x to 10.2.x and enabled Webpack 5.

But, I’m encountering a variety of Wbepack-related errors that make no sense to me and I’m stuck.

Next.js webpack migration is simple if we haven’t customised the Webpack behavior, but we did and we’re having issues migrating by hand.

Our work is open source so we’ll provide a full reproduction.

What is the current behavior?

From https://github.com/vercel/next.js/discussions/23498#discussioncomment-705606

error - ./src/app/components/BrowserPageBootstrap.tsx:157:21
Module not found: Can't resolve '"v5.1.x-rc-next-v10.2"'
  155 |           app: {
  156 |             name: process.env.NEXT_PUBLIC_APP_NAME,
> 157 |             release: process.env.NEXT_PUBLIC_APP_VERSION_RELEASE,
      |                     ^
  158 |             stage: process.env.NEXT_PUBLIC_APP_STAGE,
  159 |             preset: process.env.NEXT_PUBLIC_NRN_PRESET,
  160 |           },

Here’s how it works with Webpack 4:

• 1. We define NEXT_PUBLIC_APP_VERSION_RELEASE and NEXT_PUBLIC_APP_BUILD_ID through custom webpack definitions:

    config.plugins.map((plugin, i) => {
      if (plugin.definitions) { // If it has a "definitions" key, then we consider it's the DefinePlugin where ENV vars are stored
        // Dynamically add some "public env" variables that will be replaced during the build through "DefinePlugin"
        // Those variables are considered public because they are available at build time and at run time (they'll be replaced during initial build, by their value)
        plugin.definitions['process.env.NEXT_PUBLIC_APP_BUILD_ID'] = JSON.stringify(buildId);
        plugin.definitions['process.env.NEXT_PUBLIC_APP_VERSION_RELEASE'] = JSON.stringify(APP_VERSION_RELEASE);
      }
    });

• 1. Then, we use those environment variables in the code: const release = process.env.NEXT_PUBLIC_APP_VERSION_RELEASE;

Using Webpack 5

When doing the same thing with Webpack 5, webpack seems to try to resolve a module based on the value of the environment variable. I don’t know why it does that, maybe the way environment variables are defined is not valid anymore?

Regardless, the error message is really confusing.

Also, when disabling all environment variable generated through webpack, I get another error about Module not found: Can't resolve 'fs' and I’m still stuck there.

If the current behavior is a bug, please provide the steps to reproduce.

Reproduction:

1. git clone https://github.com/UnlyEd/next-right-now.git
2. cd next-right-now && git checkout next-v10.2
3. cp .env.local.example .env.local - Uses the default ENV variables when running locally
4. yarn
5. yarn start ==> It will fail here
6. Open http://localhost:8888

next.config.js:webpack: https://github.com/UnlyEd/next-right-now/blob/3ed6e669c0f8264678bdf6bbc26e8d014a4cba9f/next.config.js#L208

PR: https://github.com/UnlyEd/next-right-now/pull/313

What is the expected behavior?

It should behave the same as webpack 4, by starting the local server.

Other relevant information: webpack version: 5 Node.js version: v14.16.0/v15.x Operating System: MacOS Additional tools:

[ludofischer]

I don’t think I can remove all modules using fs, it’s not even an option, there are too many of them. And we need it, as part of our code runs on the server.

Some modules have a separate browser entry point. Maybe wepack is not detecting it for some reason? I think that if code running in the browser ended up calling the fs module, it would not work even with a fallback.

[AbdullahG]

I have the same issue

I am using “fs” module in some files in the project and I cannot build the project with nextjs v11 and webpack-5

"resolve.fallback.fs": "false" didnt work for me either