Error [ERR_REQUIRE_ESM]: require() of ES Module from react-dnd-html5-backend

[devbytyler]

Error [ERR_REQUIRE_ESM]: require() of ES Module project_path/node_modules/react-dnd-html5-backend/dist/index.js from project_path/node_modules/@udecode/plate-ui-dnd/dist/index.js not supported.

Description react-dnd-html5-backend is a peer dependency. The newest version is 16 which is ESM only, thus using require() is not allowed. Should be changed to import().

Was able to get around it by downgrading react-dnd and react-dnd-html5-backend

"slate": "^0.81.1", "slate-react": "^0.81.0", "@udecode/plate": "^13.3.1",

• browser: chrome

[lilingxi01]

Thanks for your workaround! Change react-dnd and react-dnd-html5-backend dependencies version to <16.0.0 resolves the issue temporarily.

[AJHaven]

I'm getting this error as well but I'm not using react-dnd. Why am I getting this error? It works if I downgrade but I don't need this functionality

[AJHaven]

Actually I was able to fix this problem by removing the slate, slate-history and slate-react dependencies. I don't think you want this in your documentation:

[richardantao]

Those already using react-dnd cannot downgrade <16 because of this issue. https://github.com/react-dnd/react-dnd/issues/3418#issuecomment-1089261754

[jordanparker6]

Actually I was able to fix this problem by removing the slate, slate-history and slate-react dependencies. I don't think you want this in your documentation:

I am getting a dependency error if I remove those packages following along with the getting started examples... I dono if that is true.

[wfischer42]

I'm attempting to upgrade from an older version of Plate and this is a total roadblock for me.

On React 18, Downgrading dnd packages produces this error instead: Module not found: Error: Package path ./jsx-runtime.js is not exported from package react.

[vkmita]

I was able to resolve this issue by adding all dnd related packages to the experimental transpilePackages config https://beta.nextjs.org/docs/api-reference/next.config.js#transpilepackages. This is what I have, and it works!

const nextConfig = {
  experimental: {
    transpilePackages: [
      '@react-dnd/asap',
      '@react-dnd/invariant',
      '@react-dnd/shallowequal',
      'dnd-core',
      'react-dnd',
      'react-dnd-html5-backend',
    ],
  },
},

[davevilela]

@vkmita this didn't work for me.

my deps:

"next": "13.0.2" "react": "18.2.0", "react-dnd": "^16.0.1", "react-dnd-html5-backend": "^16.0.1", "slate": "^0.87.0", "slate-history": "^0.86.0", "slate-hyperscript": "^0.77.0", "slate-react": "^0.88.0",

[holdenmatt]

Any update on this?

I'm evaluating whether to use Plate instead of Slate directly, and ran into this when trying the first "Basic Editor" example after installing the recommended dependencies.

transpilePackages didn't work for me, but downgrading to <16.0.0 did.

[zbeyens]

From @dylans:

We did make the full switch to esm which was painful

so our package.json for the package that includes plate has these options:

  "type": "module",
  "exports": {
    "./*": "./dist/*"
  },

in our tsconfig, we have:

  "compilerOptions": {
    "composite": true
  }

along with these options specifically for React:

"compilerOptions": {
    "lib": ["dom", "ES2021"],
    "strict": false,
    "module": "ESNext",
    "alwaysStrict": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "noFallthroughCasesInSwitch": true,
    "resolveJsonModule": true,
    "esModuleInterop": false,
    "emitDeclarationOnly": true
  }

and a base tsconfig along these lines:

{
  "compilerOptions": {
    "lib": ["ES2021"],
    "module": "Node16",
    "moduleResolution": "Node16",
    "target": "ES2021",

    "strict": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,

    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,
    "composite": true,
    "incremental": true,
    "noEmitOnError": true,

    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,

    "preserveConstEnums": true,
    "newLine": "lf",
    "pretty": true,

    "useUnknownInCatchVariables": false
  },
  "watchOptions": {
    "watchFile": "useFsEventsOnParentDirectory",
    "watchDirectory": "useFsEvents"
  }
}

we use yarn workspaces along with Babel and webpack and Next. Some of this is likely stable, but in your .yarnrc.yml file we have:

  "@udecode/plate-mention@*":
    dependencies:
      styled-components: "*"
  "@udecode/plate-serializer-csv@*":
    peerDependencies:
      slate-history: "*"
  "@udecode/plate-serializer-md@*":
    dependencies:
      react-textarea-autosize: "*"
      scriptjs: "*"
  "@udecode/plate-ui-alignment@*":
    peerDependencies:
      "@popperjs/core": "*"
      react-is: "*"
  "@udecode/plate-ui-block-quote@*":
    peerDependencies:
      react-is: "*"
  "@udecode/plate-ui-button@*":
    peerDependencies:
      react-is: "*"
  "@udecode/plate-ui-code-block@*":
    peerDependencies:
      "@popperjs/core": "*"
      react-is: "*"
  "@udecode/plate-ui-combobox@*":
    peerDependencies:
      react-is: "*"
  "@udecode/plate-ui-dnd@*":
    peerDependencies:
      react-is: "*"
  "@udecode/plate-ui-find-replace@*":
    peerDependencies:
      "@popperjs/core": "*"
      react-is: "*"
  "@udecode/plate-ui-font@*":
    peerDependencies:
      react-is: "*"
  "@udecode/plate-ui-image@*":
    peerDependencies:
      "@popperjs/core": "*"
      react-is: "*"
  "@udecode/plate-ui-line-height@*":
    peerDependencies:
      "@popperjs/core": "*"
      react-is: "*"
  "@udecode/plate-ui-link@*":
    peerDependencies:
      "@popperjs/core": "*"
      react-is: "*"
  "@udecode/plate-ui-list@*":
    peerDependencies:
      "@popperjs/core": "*"
      react-is: "*"
  "@udecode/plate-ui-media-embed@*":
    peerDependencies:
      "@popperjs/core": "*"
      react-is: "*"
  "@udecode/plate-ui-mention@*":
    peerDependencies:
      react-is: "*"
  "@udecode/plate-ui-placeholder@*":
    peerDependencies:
      react-is: "*"
  "@udecode/plate-ui-popover@*":
    peerDependencies:
      react-is: "*"
  "@udecode/plate-ui-table@*":
    peerDependencies:
      "@popperjs/core": "*"
      react-is: "*"
  "@udecode/plate-ui-toolbar@*":
    peerDependencies:
      "@popperjs/core": "*"
      react-is: "*"
  "@udecode/plate-ui@*":
    peerDependencies:
      "@popperjs/core": "*"
      react-is: "*"
  "@udecode/plate@*":
    dependencies:
      react-dnd: 14.0.5
      react-dnd-html5-backend: 14.1.0
    peerDependencies:
      "@popperjs/core": "*"
      react-is: "*"
  "@udecode/zustood@*":
    dependencies:
      scheduler: "*"
    peerDependencies:
      react: "*"
      react-dom: "*"

(for packageExtensions) and we also have: nodeLinker: "${YARN_NODE_LINKER:-node-modules}" we make pretty extensive use of yarn workspaces We have a few small patches for plate and slate-yjs (we still use the old version of slate-yjs)

[zbeyens]

@holdenmatt I'll extract the dnd plugin into a separate package for next major release, this issue should not be a blocker.

[zbeyens]

This should not be an issue anymore in @udecode/[email protected], but only in @udecode/plate-ui-dnd

[zbeyens]

Using React 18 and Next 13, here is the fix:

1. Install react-dnd 15, the latest supported version
2. Patch react-dnd, you can use patch-package or yarn patch
3. Edit node_modules/react-dnd/package.json to remove exports:

diff --git a/package.json b/package.json
index e66cead9ee6c09d50989bdecb149ecc0b4e2de48..6fb2e1f4067b0158e73f4a876fe82e58bc7f39a4 100644
--- a/package.json
+++ b/package.json
@@ -4,11 +4,6 @@
   "description": "Drag and Drop for React",
   "main": "dist/cjs/index.js",
   "types": "dist/types/index.d.ts",
-  "exports": {
-    "import": "./dist/esm/index.mjs",
-    "require": "./dist/cjs/index.js",
-    "types": "./dist/types/index.d.ts"
-  },
   "sideEffects": false,
   "repository": {
     "type": "git",

Thanks to @dylans for the help!

[castroCrea]

Hey,

this solution doesn't work with react-dnd 16 there is no those line anymore and we still got the

Uncaught Error: require() of ES Module /node_modules/react-dnd-html5-backend/dist/index.js from /node_modules/@udecode/plate-dnd/dist/index.js not supported.

[zbeyens]

react-dnd v15 has the same features than v16 so you can downgrade it and use above solution until we support ESM-only packages

[reinvanimschoot]

I'm getting

Failed to apply patch for package react-dnd

When I try to patch the package.json using the above code.

Was anybody able to make this work?

[pirtlj]

still seeing this

[zbeyens]

With Plate 24.3.5, you can use react-dnd 16 without any patch (finally 🎉)