React-dnd, not compatible with older version of react or react-dom

[AjeetVSH]

Below is the sandbox link where I'm trying to run react-dnd project with react version "16.8.3" which seems broken

Demo

Error that I get

ModuleNotFoundError Could not find module in path: 'react/jsx-runtime' relative to '/node_modules/react-dnd/dist/esm/core/DndProvider.js'

[past-code]

How to solve this problem？

[clemente-xyz]

Same issue here. Any updates?

[ajoslin103]

same problem, hoping for a solution

  "dependencies": {
    "@material-ui/core": "^4.11.3",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.57",
    "@react-hook/resize-observer": "^1.2.0",
    "@types/pg": "^7.14.10",
    "array-flatten": "^3.0.0",
    "electron-debug": "^3.2.0",
    "flatten": "^1.0.3",
    "i": "^0.3.6",
    "knex": "^0.21.17",
    "npm": "^7.5.6",
    "pg": "^8.5.1",
    "point-in-triangle": "^1.0.1",
    "pullstate": "^1.20.6",
    "range-map": "^1.0.4",
    "react": "^16.8.6",
    "react-dnd": "^14.0.2",
    "react-dnd-html5-backend": "^14.0.0",
    "react-dom": "^16.8.6",
    "react-draggable": "^4.4.3",
    "react-redux": "^7.0.3",
    "react-sizeme": "^2.6.12",
    "react-use-localstorage": "^3.5.3",
    "react-use-promise": "^0.3.1",
    "redux": "^4.0.1",
    "stringify-object": "^3.3.0"
  }

[ajoslin103]

I have gotten past the initial error, but I have to go to the office now and won't be able to look more at this for a while.

I'm posting this in case it helps anyone.

#1 install the jsx-runtime as itself

npm i jsx-runtime

#2 add an alias in your webpack config to resolve the reference (NOTE: everything in your webpack config is important, I am listing the full path to the alias to help you find exactly where to -> insert <- the alias -- please don't just copy and paste this block into your webpack config)

module.exports = {
    resolve: {
        alias: { 
            'react/jsx-runtime': require.resolve('jsx-runtime') 
        }
    }
}

This is where I found the idea: https://github.com/facebook/react/issues/20235

[ajoslin103]

Problem is I still can't get it to work in my Electron project

I've been trying to use react-dnd with this boilerplate and am not having a lot of luck -- I can't get the provider to work

https://react-dnd.github.io/react-dnd/docs/api/dnd-provider

my wrap (includes are above)

// this is in app.tsx
// Render components
const render = (Component: () => JSX.Element) => {
    ReactDOM.render(
        <DndProvider backend={HTML5Backend}>
            <AppContainer>
                <ThemeProvider theme={theme}>
                    <Component />
                </ThemeProvider>
            </AppContainer>
        </DndProvider>,
        mainElement
    );
};

their example:

import { HTML5Backend } from 'react-dnd-html5-backend'
import { DndProvider } from 'react-dnd'

export default class YourApp {
  render() {
    return (
      <DndProvider backend={HTML5Backend}>
        /* Your Drag-and-Drop Application */
      </DndProvider>
    )
  }
}

the error (on a reload)

[HMR] Waiting for update signal from WDS...
DndProvider.js:54 Uncaught TypeError: Object(...) is not a function
    at DndProvider (DndProvider.js:54)
    at renderWithHooks (react-dom.development.js:16240)
    at updateFunctionComponent (react-dom.development.js:18327)
    at updateSimpleMemoComponent (react-dom.development.js:18265)
    at updateMemoComponent (react-dom.development.js:18168)
    at beginWork$1 (react-dom.development.js:20222)
    at HTMLUnknownElement.callCallback (react-dom.development.js:337)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:386)
    at invokeGuardedCallback (react-dom.development.js:441)
    at beginWork$$1 (react-dom.development.js:25737)

DndProvider @ DndProvider.js:54
renderWithHooks @ react-dom.development.js:16240
updateFunctionComponent @ react-dom.development.js:18327
updateSimpleMemoComponent @ react-dom.development.js:18265
updateMemoComponent @ react-dom.development.js:18168
beginWork$1 @ react-dom.development.js:20222
callCallback @ react-dom.development.js:337
invokeGuardedCallbackDev @ react-dom.development.js:386
invokeGuardedCallback @ react-dom.development.js:441
beginWork$$1 @ react-dom.development.js:25737
performUnitOfWork @ react-dom.development.js:24661
workLoopSync @ react-dom.development.js:24637
performSyncWorkOnRoot @ react-dom.development.js:24236
scheduleUpdateOnFiber @ react-dom.development.js:23664
updateContainer @ react-dom.development.js:27060
(anonymous) @ react-dom.development.js:27484
unbatchedUpdates @ react-dom.development.js:24399
legacyRenderSubtreeIntoContainer @ react-dom.development.js:27483
render @ react-dom.development.js:27620
render @ app.tsx:29
./src/renderer/app.tsx @ app.tsx:41
__webpack_require__ @ bootstrap:726
fn @ bootstrap:100
0 @ app.js:128179
__webpack_require__ @ bootstrap:726
(anonymous) @ bootstrap:793
(anonymous) @ bootstrap:793

react-dom.development.js:21809 The above error occurred in the <DndProvider> component:
    in DndProvider

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

[ArthurKnoep]

Indeed the solution provided by @ajoslin103 (installing jsx-runtime) cannot work as react/jsx-runtime and jsx-runtime works very differently.

In fact, react/jsx-runtime is not even a real package, it's added by react when transpiling the code. This is something that has been added in the version 17 of react.

Fortunately for us (the folks that have not yet migrated to the version 17 :smile:), the react team has backported this update for the version 16, 15 and 14. So, in order to fix the issue, you should upgrade react to 16.14.0, 15.7.0 or 0.14.10 according to your current major version (no breaking changes to be expected).

More info in their blog: https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#whats-a-jsx-transform

[ajoslin103]

Thank you !!

[yairEO]

@ArthurKnoep - I don't understand what should be done. I have react version 16.14.0 and am having the issue:

ERROR in ../node_modules/ui-components/node_modules/react-dnd/dist/esm/core/DndProvider.js 17:0-48

Module not found: Error: Can't resolve 'react/jsx-runtime' in '/users/kube/workspace/Fix/node_modules/ui-components/node_modules/react-dnd/dist/esm/core'

DndProvider.js (line 17):

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

But I don't have react/jsx-runtime in my node_modules and it's not a package which can be installed apparently...so did not really understood what was said about it should be working for React 16.14.0 since it does not work in my case

[ArthurKnoep]

But I don't have react/jsx-runtime in my node_modules and it's not a package which can be installed apparently...so did not really understood what was said about it should be working for React 16.14.0 since it does not work in my case

The fact that you don't have react/jsx-runtime in your node_modules is ok as this package is added during the transpilation. What are you using for building your app, webpack ?

[yairEO]

Yes Webpack v4.44.2. I am checking things. Now I am not certain the jenkins pipeline which runs the build is actually using React version 16.14.0 but rather 16.8.6. Apparently the build machine has different parameters than I thought.

Thanks for the quick reply! will get back with more information.

[coderxixi]

/node_modules/react-dnd/dist/esm/core/DndProvider.js Module not found: Can't resolve 'react/jsx-runtime' in 'F:\HUOTAI\KAIBAK\测试\node_modules\react-dnd\dist\esm\core' 我也遇到了这个问题，请问这个问题要怎么解决？

[BoBoooooo]

same question , any solutions ?

[zozo-poo]

I have the same problem.

[kujohn]

encountered this issue today as well.

[kacus]

I resolved similar problem by updating React to 18.0.0. I found this solution here.

[PoorBillyPilgrim]

I was also getting the error

ModuleNotFoundError
Could not find module in path: 'react/jsx-runtime' relative to '/node_modules/react-dnd/dist/esm/core/DndProvider.js'

Upgrading React from 16.11 to 16.14 resolved this for me.

[Viktor19931]

React 17 Module not found: Error: Can't resolve 'react/jsx-runtime'

[ntubrian]

React 18.2.0 with Next 13.1.6 still got the same error

[rameshdhungana]

Upgrading to React 16.14.0 from 16.13.1 worked for me.