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

AjeetVSH · 2021-03-12T12:58:06Z

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

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 · 2021-03-17T07:22:02Z

How to solve this problem？

ClementeSerrano · 2021-03-18T22:04:34Z

Same issue here. Any updates?

ajoslin103 · 2021-03-24T12:27:07Z

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 · 2021-03-24T13:11:33Z

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: facebook/react#20235

ajoslin103 · 2021-03-25T03:21:39Z

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 · 2021-06-12T10:41:58Z

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 😄), 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 · 2021-06-12T11:27:09Z

Thank you !!

yairEO · 2021-06-16T07:37:09Z

@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 · 2021-06-16T07:50:57Z

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 · 2021-06-16T08:17:34Z

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 · 2021-07-15T08:45:34Z

/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 · 2021-12-16T07:28:18Z

same question , any solutions ?

zozo-poo · 2021-12-22T03:35:51Z

I have the same problem.

kujohn · 2022-03-10T00:53:00Z

encountered this issue today as well.

kacus · 2022-04-08T13:53:47Z

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

PoorBillyPilgrim · 2022-10-19T21:53:13Z

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 · 2023-03-15T11:36:16Z

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

ntubrian · 2023-08-24T03:09:44Z

React 18.2.0 with Next 13.1.6 still got the same error

rameshdhungana · 2024-03-20T14:39:22Z

Upgrading to React 16.14.0 from 16.13.1 worked for me.

AjeetVSH changed the title ~~React-dnd, not compatible with older version of react or react-dom~~ React-dnd, not compatible with older version of react Mar 20, 2021

AjeetVSH changed the title ~~React-dnd, not compatible with older version of react~~ React-dnd, not compatible with older version of react or react-dom Mar 20, 2021

zehawki mentioned this issue Apr 14, 2021

Module not found: Can't resolve 'react/jsx-runtime' in '...\node_modules\react-dnd\dist\esm\core' react-page/react-page#961

Closed

fappaz mentioned this issue Jun 14, 2022

Compatibility with react 16.13.1 due to spfx #3461

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

AjeetVSH commented Mar 12, 2021

past-code commented Mar 17, 2021

ClementeSerrano commented Mar 18, 2021

ajoslin103 commented Mar 24, 2021

ajoslin103 commented Mar 24, 2021

ajoslin103 commented Mar 25, 2021

ArthurKnoep commented Jun 12, 2021

ajoslin103 commented Jun 12, 2021

yairEO commented Jun 16, 2021 •

edited

ArthurKnoep commented Jun 16, 2021

yairEO commented Jun 16, 2021 •

edited

coderxixi commented Jul 15, 2021

BoBoooooo commented Dec 16, 2021

zozo-poo commented Dec 22, 2021

kujohn commented Mar 10, 2022

kacus commented Apr 8, 2022 •

edited

PoorBillyPilgrim commented Oct 19, 2022

Viktor19931 commented Mar 15, 2023

ntubrian commented Aug 24, 2023

rameshdhungana commented Mar 20, 2024

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

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

Comments

AjeetVSH commented Mar 12, 2021

past-code commented Mar 17, 2021

ClementeSerrano commented Mar 18, 2021

ajoslin103 commented Mar 24, 2021

ajoslin103 commented Mar 24, 2021

ajoslin103 commented Mar 25, 2021

ArthurKnoep commented Jun 12, 2021

ajoslin103 commented Jun 12, 2021

yairEO commented Jun 16, 2021 • edited

DndProvider.js (line 17):

ArthurKnoep commented Jun 16, 2021

yairEO commented Jun 16, 2021 • edited

coderxixi commented Jul 15, 2021

BoBoooooo commented Dec 16, 2021

zozo-poo commented Dec 22, 2021

kujohn commented Mar 10, 2022

kacus commented Apr 8, 2022 • edited

PoorBillyPilgrim commented Oct 19, 2022

Viktor19931 commented Mar 15, 2023

ntubrian commented Aug 24, 2023

rameshdhungana commented Mar 20, 2024

yairEO commented Jun 16, 2021 •

edited

yairEO commented Jun 16, 2021 •

edited

kacus commented Apr 8, 2022 •

edited