react-page: jsx-runtime not exported (DndProvider error)

Hi, I want to try reactpage but when npm run dev, i have error :

error - ./node_modules/react-dnd/dist/esm/core/DndProvider.mjs:28:0
Module not found: Package path ./jsx-runtime.js is not exported from package /home/raphael/Documents/nextjs/rnd-text-editor-nextjs/node_modules/react (see exports field in /home/raphael/Documents/nextjs/rnd-text-editor-nextjs/node_modules/react/package.json)

I use : boilerplate nextjs + typescript package.json :

index.tsx :

About this issue

Original URL
State: open
Created 2 years ago
Comments: 34 (1 by maintainers)

Most upvoted comments

@hmbrg at least the example project works with next13 without any problem (only some hydration errors), did you try to use the lastest nextjs version? (13.1.2)

Sorry for the late response. Updating to 13.1.2 fixed the issue momentarily, but we since upgraded to next 13.4.5 and the issue reappeared, but I’ve since been able to fix the issue.

To fix use react-dnd with ESM support we need to upgrade the version react-page is using internally to ^16. In our pnpm repo, this can be achieved by adding the following to the package.json:

 "pnpm": {
    "overrides": {
      "react-dnd": "^16.0.0"
    },
}

We then get the following error when trying to build using Next:

Error [ERR_REQUIRE_ESM]: require() of ES Module /node_modules/react-dnd/dist/index.js from /node_modules/@react-page/editor/lib/core/components/hooks/nodeActions.js not supported.
Instead change the require of index.js in /node_modules/@react-page/editor/lib/core/components/hooks/nodeActions.js to a dynamic import() which is available in all CommonJS modules.

This means we need to update all imports in the react-page package to use import() instead of require(). To do this with pnpm. We can use the patch command like this: pnpm patch @react-page/editor. Open the folder and use the search & replace functionality of your IDE to change all imports of react-dnd like this: CleanShot 2023-06-15 at 05 14 58@2x

After that run pnpm patch-commit <PATCH_FOLDER> to apply the patch.

I hope this is helpful for people using Next.js! If this a generally appliable patch for all bundlers, I would be happy to create a PR to finally fix this, but I’m not sure if this just works for Next.js.

hmbrg on Jun 15, 2023

@634750802 hi, i found the problem, https://github.com/react-page/react-page/issues/1281

macrozone on Feb 17, 2023

@macrozone i have just created a demo repo and a preview on codespace, the issue was reproduced.

my local node is v18.12.1, npm is 8.19.2

634750802 on Jan 24, 2023

please use react 17 at the moment.

macrozone on May 18, 2022