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

[zhangfy1994]

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

[ncovercash]

@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.