REACT 18 + WEBPACK 5: Error: Can't resolve 'process/browser'

Describe the bug

ERROR in ./node_modules/@react-dnd/invariant/dist/index.js 42:16-23
Module not found: Error: Can't resolve 'process/browser' in '/Users/tommix/DEVELOPMENT/ARES/ares-ui/ares-control-center/node_modules/@react-dnd/invariant/dist'
Did you mean 'browser.js'?
BREAKING CHANGE: The request 'process/browser' failed to resolve only because it was resolved as fully specified

Reproduction

mpx create-react-app npm install react-dnd

in /src/index.js add:

import { useDrag } from "react-dnd";

npm run

Expected behavior No Errors in compiling. No need to change the webpack config.

WORKAROUND npm install react-app-rewired -d

create ./config-overrides.js and add:

 config.module.rules.unshift({
    test: /\.m?js$/,
    resolve: {
      fullySpecified: false, // disable the behavior
    },
  });

Issue Analytics

State:
Created a year ago
Reactions:8
Comments:11

Top GitHub Comments

27reactions

zhangfy1994commented, Aug 15, 2022

because react-dnd use process/browser. Solution： npm i process in webpack config: resolve: { fallback: { 'process/browser': require.resolve('process/browser'), } }

7reactions

ncovercashcommented, Jul 7, 2022

@arcsin1 you can modify your Webpack config. If you used create-react-app, you’ll need something fancy with react-app-rewired as described by @ttessarolo.

I got away with adding the following to my config:

{
  resolve: {
    alias: {
      "react/jsx-dev-runtime.js": "react/jsx-dev-runtime",
      "react/jsx-runtime.js": "react/jsx-runtime",
    },
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        resolve: {
          fullySpecified: false
        },
      },
    ]
  }
}

The process/browser issue was fixed with the module rule, whereas the issue with jsx-runtime (as mentioned in a number of similar issues) was fixed by adding the resolve alias.

Top Results From Across the Web

node.js - Webpack 5 Breaking Changes "process/browser"

I added 'process/browser': require.resolve('process/browser') to the fallbacks object without changing anything else and it worked.

Webpack 5 errors | ImmutableX Documentation

The reason for this error is that create-react-app uses a version of webpack greater than 5, which, unlike versions < 5, does not...

react webpack < 5 used to include polyfills for node.js core ...

I resolve these errors but my app did not render. If you are interested to clear these errors you can paste code right...

How to set up web3.js with React 18 and Webpack5 without ...

FYI: React 18 uses Webpack 5. ... Module not found: Error: Can't resolve 'stream' in . ... node_modules/ethereumjs-util/dist.browser/account.js 71:31-48.

To v5 from v4 - webpack

Upgrade webpack 4 and its plugins/loaders · Make sure your build has no errors or warnings · Make sure to use mode ·...