Can't use react-dnd ESM library: ERR_REQUIRE_ESM

[binajmen]

What version of Remix are you using?

1.4.1 – Blues stack

Steps to Reproduce

import { DndProvider, useDrag, useDrop } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
import { TouchBackend } from "react-dnd-touch-backend";

Expected Behavior

No errors

Actual Behavior

I recently migrated my remix project to the blues stack (1.4.1). I'm using react-dnd in my project. When I executed npm run dev, I got the following warnings + error:

react-dnd is possibly an ESM only package and should be bundled with "serverDependenciesToBundle in remix.config.js.
react-dnd-html5-backend is possibly an ESM only package and should be bundled with "serverDependenciesToBundle in remix.config.js.
react-dnd-touch-backend is possibly an ESM only package and should be bundled with "serverDependenciesToBundle in remix.config.js.
/Users/benjamin/Projects/horeka/horeka/build/index.js:4591
var import_react_dnd = require("react-dnd");
                       ^
Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/benjamin/Projects/horeka/horeka/node_modules/react-dnd/dist/index.js from /Users/benjamin/Projects/horeka/horeka/build/index.js not supported.
Instead change the require of /Users/benjamin/Projects/horeka/horeka/node_modules/react-dnd/dist/index.js in /Users/benjamin/Projects/horeka/horeka/build/index.js to a dynamic import() which is available 

I followed the warnings advice, adding stuff to serverDependenciesToBundle. Several iterations led me to end up with this remix.conf.js file:

/**
 * @type {import('@remix-run/dev').AppConfig}
 */
module.exports = {
  cacheDirectory: "./node_modules/.cache/remix",
  ignoredRouteFiles: [".*", "**/*.css", "**/*.test.{js,jsx,ts,tsx}"],
  serverDependenciesToBundle: [
    /^react-dnd.*/,
    /^@react-dnd.*/,
    /^dnd-core/,
  ],
};

But I still get an error:

/Users/benjamin/Projects/horeka/horeka/build/index.js:5173
var scope = typeof global !== "undefined" ? global : self;
                  ^
Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/benjamin/Projects/horeka/horeka/node_modules/@react-dnd/asap/dist/index.js from /Users/benjamin/Projects/horeka/horeka/build/index.js not supported.
Instead change the require of /Users/benjamin/Projects/horeka/horeka/node_modules/@react-dnd/asap/dist/index.js in /Users/benjamin/Projects/horeka/horeka/build/index.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/Users/benjamin/Projects/horeka/horeka/build/index.js:5173:19)
    at Server.<anonymous> (/Users/benjamin/Projects/horeka/horeka/build/server.js:69:3)
    at Object.onceWrapper (node:events:639:28)
    at Server.emit (node:events:520:28)
    at Server.emit (node:domain:475:12)
    at emitListeningNT (node:net:1364:10) {
  code: 'ERR_REQUIRE_ESM'
}
ERROR: "dev:server" exited with 1.

In my old project setup ("remix": "^1.2.3"), it was working flawlessly.

Existing issues has been closed an redirected to #109 but has been closed too:
#109 (comment)

But in this case, serverDependenciesToBundle doesn't seem to help.

Any help would be greatly appreciated 🙏

[revelt]

Did you wipe the lockfile and node_modules and re-install from fresh?

[silvenon]

I tried these imports in a fresh minimal template (not the Blues stack) and they worked. I doubt they fail in the Blues stack either, try to figure out what is special about your setup, see if you can reproduce it in a fresh build.

[binajmen]

It didn't work for me with the regex, but the exhaustive list seems to work:

module.exports = {
  cacheDirectory: "./node_modules/.cache/remix",
  ignoredRouteFiles: [".*", "**/*.css", "**/*.test.{js,jsx,ts,tsx}"],
  serverDependenciesToBundle: [
    "react-dnd",
    "react-dnd-html5-backend",
    "react-dnd-touch-backend",
    "@react-dnd/invariant",
    "dnd-core",
    "@react-dnd/shallowequal",
    "@react-dnd/asap",
  ],
};

[kiliman]

I added a command to my rmx-cli project to get-esm-packages. It scans the packages you provide and looks at the package.json files. If it's type:module, it'll add it to bundle list. It recursively scans all dependencies.

npx rmx get-esm-packages react-dnd react-dnd-html5-backend react-dnd-touch-backend

{
  'react-dnd',
  '@react-dnd/invariant',
  '@react-dnd/shallowequal',
  'dnd-core',
  '@react-dnd/asap',
  'react-dnd-html5-backend',
  'react-dnd-touch-backend'
}

[kiliman]

You can find the latest version here https://github.com/kiliman/rmx-cli