react-dnd: 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
    },
  });

About this issue

Original URL
State: open
Created 2 years ago
Reactions: 21
Comments: 15

Commits related to this issue

SH-41 -(RCT)-Remove errors due to using React 18 and Webpack 5 Read More: https://alchemy.com/blog/how-to-polyfill-node-core-modules-in-webpack-5 https://github.com/react-dnd/react-dnd/issues/342... — committed to davidjguru/summerhouse by davidjguru 2 years ago

Most upvoted comments

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

+97

zhangfy1994 on Aug 15, 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.

+21

ncovercash on Jul 7, 2022

You are a damn angel @ttessarolo

tsharliz-Joma on Nov 28, 2022

i got the same problem

My WORKAROUND

change the version of react-dnd and react-dnd-html5-backend

"react-dnd": "^14.0.4", "react-dnd-html5-backend": "^14.0.2"

YTU94 on Apr 12, 2022