react-dnd 16.0.0 is causing "Module not found: Error: Can't resolve 'react/jsx-runtime'"

Describe the bug

I have a working application with react 17.0.2, react-dnd 15.1.2, and react-dnd-html5-backend 15.1.3. I updated to react-dnd 16.0.0 and react-dnd-html5-backend 16.0.0. I’m still on react 17, no plans to upgrade yet.

my build is now failing with:

ERROR in ./node_modules/react-dnd/dist/core/DndProvider.js 28:0-48
Module not found: Error: Can't resolve 'react/jsx-runtime' in '/home/stheine/js/release-manager/node_modules/react-dnd/dist/core'
Did you mean 'jsx-runtime.js'?
BREAKING CHANGE: The request 'react/jsx-runtime' 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 'react/jsx-runtime' in '/home/stheine/js/release-manager/node_modules/react-dnd/dist/core'
  Parsed request is a module
  using description file: /home/stheine/js/release-manager/node_modules/react-dnd/package.json (relative path: ./dist/core)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /home/stheine/js/release-manager/node_modules/react-dnd/dist/core/node_modules doesn't exist or is not a directory
      /home/stheine/js/release-manager/node_modules/react-dnd/dist/node_modules doesn't exist or is not a directory
      looking for modules in /home/stheine/js/release-manager/node_modules/react-dnd/node_modules
        /home/stheine/js/release-manager/node_modules/react-dnd/node_modules/react doesn't exist
      /home/stheine/js/release-manager/node_modules/node_modules doesn't exist or is not a directory
      looking for modules in /home/stheine/js/release-manager/node_modules
        existing directory /home/stheine/js/release-manager/node_modules/react
          using description file: /home/stheine/js/release-manager/node_modules/react/package.json (relative path: .)
            using description file: /home/stheine/js/release-manager/node_modules/react/package.json (relative path: ./jsx-runtime)
              Field 'browser' doesn't contain a valid alias configuration
              /home/stheine/js/release-manager/node_modules/react/jsx-runtime doesn't exist
      /home/stheine/js/node_modules doesn't exist or is not a directory
      /home/stheine/node_modules doesn't exist or is not a directory
      /home/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
 @ ./node_modules/react-dnd/dist/core/index.js 2:0-33 2:0-33
 @ ./node_modules/react-dnd/dist/index.js 1:0-32 1:0-32
 @ ./src/containers/UnlinkedPatches/UnlinkedPatches.jsx 1:2565-2600 18:39-50
 @ ./src/containers/WorkspaceTab/WorkspaceTab.jsx 1:4502-4570 3:9763-9778
 @ ./src/containers/ReleaseManager/Routes.jsx 1:575-634 1:1793-1805 1:1965-1977
 @ ./src/containers/ReleaseManager/ReleaseManager.jsx 1:6494-6527 7:4051-4057
 @ ./src/components/Root.jsx 1:3306-3382 1:4292-4306
 @ ./src/index.jsx 2:118-158 2:488-492

for now, I’m reverting to react-dnd 15.

Reproduction

Expected behavior

build without errors

Screenshots

Desktop (please complete the following information):

• OS: Linux
• Browser: n/a (not relevant - the build is failing)
• Version: n/a

Additional context

[renchap]

This is due to React 17 not having the correct exports entries in package.json. React 18 has those entries, so it should work fine.

React issue: https://github.com/facebook/react/issues/20235

With Webpack and React 17, you can add this Webpack config so it knows where to find those files if they dont exist:

resolve: {
    fallback: {
        'react/jsx-runtime': 'react/jsx-runtime.js',
        'react/jsx-dev-runtime': 'react/jsx-dev-runtime.js',
    },
},

[maxdiachenko-max]

The same issue i am facing with React v17.