`Module not found: Error: Can't resolve 'process/browser'` after upgrading to v2.8.0

[dwiyatci]

Sorry for bumping the error log quite mindlessly from my CI:

ERROR in ../../node_modules/.pnpm/@reduxjs+toolkit@2.8.2_react-redux@9.2.0_@types+react@19.1.4_react@18.3.1_redux@5.0.1__react@18.3.1/node_modules/@reduxjs/toolkit/dist/redux-toolkit.modern.mjs 1018:15-22
Module not found: Error: Can't resolve 'process/browser' in '/codebuild/output/src400872583/src/github.mycompany.com/MyOrg/my-project/node_modules/.pnpm/@reduxjs+toolkit@2.8.2_react-redux@9.2.0_@types+react@19.1.4_react@18.3.1_redux@5.0.1__react@18.3.1/node_modules/@reduxjs/toolkit/dist'
Did you mean 'browser.js'?
BREAKING CHANGE: The request 'process/browser' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
resolve 'process/browser' in '/codebuild/output/src400872583/src/github.mycompany.com/MyOrg/my-project/node_modules/.pnpm/@reduxjs+toolkit@2.8.2_react-redux@9.2.0_@types+react@19.1.4_react@18.3.1_redux@5.0.1__react@18.3.1/node_modules/@reduxjs/toolkit/dist'
  Parsed request is a module
  using description file: /codebuild/output/src400872583/src/github.mycompany.com/MyOrg/my-project/node_modules/.pnpm/@reduxjs+toolkit@2.8.2_react-redux@9.2.0_@types+react@19.1.4_react@18.3.1_redux@5.0.1__react@18.3.1/node_modules/@reduxjs/toolkit/package.json (relative path: ./dist)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /codebuild/output/src400872583/src/github.mycompany.com/MyOrg/my-project/node_modules/.pnpm/@reduxjs+toolkit@2.8.2_react-redux@9.2.0_@types+react@19.1.4_react@18.3.1_redux@5.0.1__react@18.3.1/node_modules/@reduxjs/toolkit/dist/node_modules doesn't exist or is not a directory
      /codebuild/output/src400872583/src/github.mycompany.com/MyOrg/my-project/node_modules/.pnpm/@reduxjs+toolkit@2.8.2_react-redux@9.2.0_@types+react@19.1.4_react@18.3.1_redux@5.0.1__react@18.3.1/node_modules/@reduxjs/toolkit/node_modules doesn't exist or is not a directory
      /codebuild/output/src400872583/src/github.mycompany.com/MyOrg/my-project/node_modules/.pnpm/@reduxjs+toolkit@2.8.2_react-redux@9.2.0_@types+react@19.1.4_react@18.3.1_redux@5.0.1__react@18.3.1/node_modules/@reduxjs/node_modules doesn't exist or is not a directory
      /codebuild/output/src400872583/src/github.mycompany.com/MyOrg/my-project/node_modules/.pnpm/@reduxjs+toolkit@2.8.2_react-redux@9.2.0_@types+react@19.1.4_react@18.3.1_redux@5.0.1__react@18.3.1/node_modules/node_modules doesn't exist or is not a directory
      looking for modules in /codebuild/output/src400872583/src/github.mycompany.com/MyOrg/my-project/node_modules/.pnpm/@reduxjs+toolkit@2.8.2_react-redux@9.2.0_@types+react@19.1.4_react@18.3.1_redux@5.0.1__react@18.3.1/node_modules
        /codebuild/output/src400872583/src/github.mycompany.com/MyOrg/my-project/node_modules/.pnpm/@reduxjs+toolkit@2.8.2_react-redux@9.2.0_@types+react@19.1.4_react@18.3.1_redux@5.0.1__react@18.3.1/node_modules/process doesn't exist
      looking for modules in /codebuild/output/src400872583/src/github.mycompany.com/MyOrg/my-project/node_modules/.pnpm/node_modules
        existing directory /codebuild/output/src400872583/src/github.mycompany.com/MyOrg/my-project/node_modules/.pnpm/node_modules/process
          using description file: /codebuild/output/src400872583/src/github.mycompany.com/MyOrg/my-project/node_modules/.pnpm/node_modules/process/package.json (relative path: .)
            using description file: /codebuild/output/src400872583/src/github.mycompany.com/MyOrg/my-project/node_modules/.pnpm/node_modules/process/package.json (relative path: ./browser)
              Field 'browser' doesn't contain a valid alias configuration
              /codebuild/output/src400872583/src/github.mycompany.com/MyOrg/my-project/node_modules/.pnpm/node_modules/process/browser doesn't exist
      /codebuild/output/src400872583/src/github.mycompany.com/MyOrg/my-project/node_modules/node_modules doesn't exist or is not a directory
      looking for modules in /codebuild/output/src400872583/src/github.mycompany.com/MyOrg/my-project/node_modules
        /codebuild/output/src400872583/src/github.mycompany.com/MyOrg/my-project/node_modules/process doesn't exist
      /codebuild/output/src400872583/src/github.concur.com/Nicosia/node_modules doesn't exist or is not a directory
      /codebuild/output/src400872583/src/github.concur.com/node_modules doesn't exist or is not a directory
      /codebuild/output/src400872583/src/node_modules doesn't exist or is not a directory
      /codebuild/output/src400872583/node_modules doesn't exist or is not a directory
      /codebuild/output/node_modules doesn't exist or is not a directory
      /codebuild/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
 @ ./lib/configureStore.js
 @ ./lib/client.js 6:45-72

ERROR in ../../node_modules/.pnpm/@reduxjs+toolkit@2.8.2_react-redux@9.2.0_@types+react@19.1.4_react@18.3.1_redux@5.0.1__react@18.3.1/node_modules/@reduxjs/toolkit/dist/redux-toolkit.modern.mjs + 4 modules
Cannot read properties of undefined (reading 'module')
while analyzing module javascript/esm|/codebuild/output/src400872583/src/github.mycompany.com/MyOrg/my-project/node_modules/.pnpm/@reduxjs+toolkit@2.8.2_react-redux@9.2.0_@types+react@19.1.4_react@18.3.1_redux@5.0.1__react@18.3.1/node_modules/@reduxjs/toolkit/dist/redux-toolkit.modern.mjs for concatenation
TypeError: Cannot read properties of undefined (reading 'module')
while analyzing module javascript/esm|/codebuild/output/src400872583/src/github.mycompany.com/MyOrg/my-project/node_modules/.pnpm/@reduxjs+toolkit@2.8.2_react-redux@9.2.0_@types+react@19.1.4_react@18.3.1_redux@5.0.1__react@18.3.1/node_modules/@reduxjs/toolkit/dist/redux-toolkit.modern.mjs for concatenation
    at ProvidedDependencyTemplate.apply (/codebuild/output/src400872583/src/github.mycompany.com/MyOrg/my-project/node_modules/.pnpm/webpack@5.99.9_webpack-cli@6.0.1/node_modules/webpack/lib/dependencies/ProvidedDependency.js:134:61)
    at JavascriptGenerator.sourceDependency (/codebuild/output/src400872583/src/github.mycompany.com/MyOrg/my-project/node_modules/.pnpm/webpack@5.99.9_webpack-cli@6.0.1/node_modules/webpack/lib/javascript/JavascriptGenerator.js:246:12)
    at JavascriptGenerator.sourceModule (/codebuild/output/src400872583/src/github.mycompany.com/MyOrg/my-project/node_modules/.pnpm/webpack@5.99.9_webpack-cli@6.0.1/node_modules/webpack/lib/javascript/JavascriptGenerator.js:132:9)
    at JavascriptGenerator.generate (/codebuild/output/src400872583/src/github.mycompany.com/MyOrg/my-project/node_modules/.pnpm/webpack@5.99.9_webpack-cli@6.0.1/node_modules/webpack/lib/javascript/JavascriptGenerator.js:108:8)
    at NormalModule.codeGeneration (/codebuild/output/src400872583/src/github.mycompany.com/MyOrg/my-project/node_modules/.pnpm/webpack@5.99.9_webpack-cli@6.0.1/node_modules/webpack/lib/NormalModule.js:1494:17)
    at ConcatenatedModule._analyseModule (/codebuild/output/src400872583/src/github.mycompany.com/MyOrg/my-project/node_modules/.pnpm/webpack@5.99.9_webpack-cli@6.0.1/node_modules/webpack/lib/optimize/ConcatenatedModule.js:1720:29)
    at ConcatenatedModule.codeGeneration (/codebuild/output/src400872583/src/github.mycompany.com/MyOrg/my-project/node_modules/.pnpm/webpack@5.99.9_webpack-cli@6.0.1/node_modules/webpack/lib/optimize/ConcatenatedModule.js:1123:9)
    at /codebuild/output/src400872583/src/github.mycompany.com/MyOrg/my-project/node_modules/.pnpm/webpack@5.99.9_webpack-cli@6.0.1/node_modules/webpack/lib/Compilation.js:3651:22
    at /codebuild/output/src400872583/src/github.mycompany.com/MyOrg/my-project/node_modules/.pnpm/webpack@5.99.9_webpack-cli@6.0.1/node_modules/webpack/lib/Cache.js:99:5
    at Hook.eval [as callAsync] (eval at create (/codebuild/output/src400872583/src/github.mycompany.com/MyOrg/my-project/node_modules/.pnpm/tapable@2.2.2/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)

---

I asked AI/LLM, and it suggested me to:

1. Add Webpack Resolutions: Ensure you have configured Webpack to understand how to process these modules properly.

// webpack.config.js
module.exports = {
  resolve: {
    fallback: {
      // This is often necessary to tell Webpack how to handle built-in node modules in the browser context.
      process: require.resolve('process/browser'),
    },
  },
};

2. Install process Package: You may need to install a browser-compatible version of the process package.

npm install process

---

I haven't tried the above solution yet because I've got another issue that prevents me from building the project locally 🤦🏻; I highly suspect, though, that the error has something to do with the rework of the package definitions mentioned in the Release Notes for v2.8.0, but I wonder what's the diff and why it didn't break previously. Thanks!

[dwiyatci]

Ok, actually, I managed to try the solution from the AI just now. And it works! 🎉 I guess it's just the "Why?" now.

[markerikson]

This all seems pretty wrong. There aren't any references to a process/browser in either our codebase or our packaging setup that I know of. We do have references to process.env.NODE_ENV, which is used to determine dev vs prod behavior, but by standard JS build convention that's supposed to be getting replaced at build time.

What build tool are you using? Can you provide a small repro of this happening by itself separate from your app?

[dwiyatci]

It's good old webpack. 😬 I'm sorry but unfortunately I won't have the bandwidth these days to isolate and create a minimum-reproducible example 🙏

That said, I can assure you that the only diff from the last known working is the upgrade to RTK v2.8. And what about:

• https://github.com/reduxjs/redux-toolkit/blob/master/packages/toolkit/tsup.config.mts#L200
• https://github.com/reduxjs/redux-toolkit/blob/master/packages/toolkit/tsup.config.mts#L222

?

[aryaemami59]

@dwiyatci Are you able to at least show you webpack config file?

[markerikson]

@dwiyatci : both of those lines refer to the redux-toolkit.browser.mjs artifact, which is meant to be a precompiled production-mod build that has already compiled out the process.env.NODE_ENV references (since the browser doesn't know about process at all). Per the error message, Webpack is seeing the redux-toolkit.modern.mjs artifact, which is what it should be finding. That file does have process.env.NODE_ENV references left in it... but Webpack is supposed to be doing its own replacement of those during the build step. That's part of what's confusing me here. Normally the Webpack define plugin is part of the config and replaces those references, and nothing about the contents of our artifacts would have changed in relation to that as part of the 2.8.0 release.

If anything, my guess is that your Webpack config was somehow previously finding a different one of our build artifacts (CJS, maybe?), and then maybe the 2.8.0 release packaging changes made it start finding the modern artifact, but even then the error is surprising to me.

[dwiyatci]

The team that's responsible for maintaining the webpack config reached out to me informing that they had to patch the base config from:

new webpack.ProvidePlugin({
  process: 'process/browser',
});

to:

new webpack.ProvidePlugin({
  process: require.resolve('process/browser'),
});

...in order to generally make the upgrade to RTK v2.8 work for the other teams. So yeah, I guess the fault is on our end.

Quoting that someone:

I think the gist is:

• webpack is now picking up the "modern" export and that is now including the "process" reference. - potentially we (them and us) could look deeper into why it is picking up the modern export and not the browser export.
• We have a ProvidePlugin that defines the “process” to a polyfill library because there is a legitimate use case for it.
• That configuration did not properly look up the path for the polyfill so it was ending up as undefined.

[markerikson]

That sounds like all kinds of fun :) Thanks for letting us know!