REACT 18 + WEBPACK 5: Compiling Errors

[ttessarolo]

Describe the bug
Two Compiling Error with REACT 18 and Webpack 5:

ERROR in ./node_modules/@react-dnd/invariant/dist/esm/index.mjs 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/esm'
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.

and:

ERROR in ./node_modules/react-dnd/dist/esm/core/DndProvider.mjs 37:0-51
Module not found: Error: Package path ./jsx-runtime.js is not exported from package /Users/tommix/DEVELOPMENT/ARES/ares-ui/ares-control-center/node_modules/react (see exports field in /Users/tommix/DEVELOPMENT/ARES/ares-ui/ares-control-center/node_modules/react/package.json)

Reproduction

mpx create-react-app
npm install react-dnd

in /src/index.js add:

import { useDrag } from "react-dnd";

Steps to reproduce the behavior:

npm start

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

WORKAROUND
npm install react-app-rewired -d

create ./config-overrides.js as follow:

const webpack = require("webpack");
module.exports = function override(config, env) {
  config.resolve.fallback = {
    url: require.resolve("url"),
    assert: require.resolve("assert"),
    crypto: require.resolve("crypto-browserify"),
    http: require.resolve("stream-http"),
    https: require.resolve("https-browserify"),
    os: require.resolve("os-browserify/browser"),
    buffer: require.resolve("buffer"),
    stream: require.resolve("stream-browserify"),
    process: require.resolve("process"),
  };

  config.plugins.push(
    new webpack.ProvidePlugin({
      process: "process/browser",
      Buffer: ["buffer", "Buffer"],
    })
  );


  config.stats = { ...config.stats, children: true };

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

  // react-dnd
  config.resolve.alias = {
    ...config.resolve.alias,
    "react/jsx-runtime.js": "react/jsx-runtime",
    "react/jsx-dev-runtime.js": "react/jsx-dev-runtime",
  };

  return config;
};

[bug-brain]

The cause is probably here.

[obetomuniz]

Same problem here:

error - Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './jsx-runtime.js' is not defined by "exports" in node_modules/react/package.json imported from node_modules/react-dnd/dist/esm/core/DndProvider.mjs

[vocko]

I have the same problem with the Module not found: Error: Package path ./jsx-runtime.js is not exported from package /node_modules/react (see exports field in node_modules/react/package.json).

[usback]

i have the same problem with the not found: Error: Package path ./jsx-runtime.js
ERROR in ./node_modules/react-dnd/dist/esm/core/DndProvider.mjs 28:0-51

[timhettler]

This can easily be fixed by patching node_modules/react-dnd/dist/esm/core/DndProvider.mjs. Update the first line to remove the .js extension.

-import { jsx as _jsx } from "react/jsx-runtime.js";
+import { jsx as _jsx } from "react/jsx-runtime";

[rileyjshaw]

This looks like a duplicate of #3416

[vocko]

This can easily be fixed by patching node_modules/react-dnd/dist/esm/core/DndProvider.mjs. Update the first line to remove the .js extension.

-import { jsx as _jsx } from "react/jsx-runtime.js";
+import { jsx as _jsx } from "react/jsx-runtime";

Is it possible to merge this as a permanent fix or does it potentially break something else?

[timhettler]

Is it possible to merge this as a permanent fix or does it potentially break something else?

I assume it's possible but I didn't have time today to clone the repo and run tests, make the PR, etc.

If I have time this week I will make a PR if someone else doesn't resolve it.

[darthtrevino]

The jsx runtime issues have been resolve in v16

[rubenthedragon]

This workaround worked for me, I only needed this section to make the errors go away.

WORKAROUND npm install react-app-rewired -d

create ./config-overrides.js as follow:

const webpack = require("webpack");
module.exports = function override(config, env) {

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

  return config;
};