Error [ERR_REQUIRE_ESM]: require() of ES Module

Describe the Bug

I’m using React Flow with Remix, and getting the following error when running example code:

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/user/Emerge/flow/node_modules/.pnpm/react-flow-renderer@10.0.0-next.51_react-dom@17.0.2+react@17.0.2/node_modules/react-flow-renderer/dist/esm/index.js from /Users/user/Emerge/flow/build/index.js not supported. Instead change the require of /Users/user/Emerge/flow/node_modules/.pnpm/react-flow-renderer@10.0.0-next.51_react-dom@17.0.2+react@17.0.2/node_modules/react-flow-renderer/dist/esm/index.js in /Users/user/Emerge/flow/build/index.js to a dynamic import() which is available in all CommonJS modules. at Object.<anonymous> (/Users/user/Emerge/flow/build/index.js:395:43) at /Users/user/Emerge/flow/node_modules/.pnpm/@remix-run+serve@1.2.3_react-dom@17.0.2+react@17.0.2/node_modules/@remix-run/serve/index.js:40:17 at Layer.handle [as handle_request] (/Users/user/Emerge/flow/node_modules/.pnpm/express@4.17.3/node_modules/express/lib/router/layer.js:95:5) at next (/Users/user/Emerge/flow/node_modules/.pnpm/express@4.17.3/node_modules/express/lib/router/route.js:137:13) at next (/Users/user/Emerge/flow/node_modules/.pnpm/express@4.17.3/node_modules/express/lib/router/route.js:131:14) at next (/Users/user/Emerge/flow/node_modules/.pnpm/express@4.17.3/node_modules/express/lib/router/route.js:131:14) at next (/Users/user/Emerge/flow/node_modules/.pnpm/express@4.17.3/node_modules/express/lib/router/route.js:131:14) at next (/Users/user/Emerge/flow/node_modules/.pnpm/express@4.17.3/node_modules/express/lib/router/route.js:131:14) at next (/Users/user/Emerge/flow/node_modules/.pnpm/express@4.17.3/node_modules/express/lib/router/route.js:131:14) at next (/Users/user/Emerge/flow/node_modules/.pnpm/express@4.17.3/node_modules/express/lib/router/route.js:131:14) at Route.dispatch (/Users/user/Emerge/flow/node_modules/.pnpm/express@4.17.3/node_modules/express/lib/router/route.js:112:3) at Layer.handle [as handle_request] (/Users/user/Emerge/flow/node_modules/.pnpm/express@4.17.3/node_modules/express/lib/router/layer.js:95:5) at /Users/user/Emerge/flow/node_modules/.pnpm/express@4.17.3/node_modules/express/lib/router/index.js:281:22 at param (/Users/user/Emerge/flow/node_modules/.pnpm/express@4.17.3/node_modules/express/lib/router/index.js:360:14) at param (/Users/user/Emerge/flow/node_modules/.pnpm/express@4.17.3/node_modules/express/lib/router/index.js:371:14) at Function.process_params (/Users/user/Emerge/flow/node_modules/.pnpm/express@4.17.3/node_modules/express/lib/router/index.js:416:3) at next (/Users/user/Emerge/flow/node_modules/.pnpm/express@4.17.3/node_modules/express/lib/router/index.js:275:10) at logger (/Users/user/Emerge/flow/node_modules/.pnpm/morgan@1.10.0/node_modules/morgan/index.js:144:5) at Layer.handle [as handle_request] (/Users/user/Emerge/flow/node_modules/.pnpm/express@4.17.3/node_modules/express/lib/router/layer.js:95:5) at trim_prefix (/Users/user/Emerge/flow/node_modules/.pnpm/express@4.17.3/node_modules/express/lib/router/index.js:323:13) at /Users/user/Emerge/flow/node_modules/.pnpm/express@4.17.3/node_modules/express/lib/router/index.js:284:7 at Function.process_params (/Users/user/Emerge/flow/node_modules/.pnpm/express@4.17.3/node_modules/express/lib/router/index.js:341:12) at next (/Users/user/Emerge/flow/node_modules/.pnpm/express@4.17.3/node_modules/express/lib/router/index.js:275:10) at SendStream.error (/Users/user/Emerge/flow/node_modules/.pnpm/serve-static@1.14.2/node_modules/serve-static/index.js:121:7) at SendStream.emit (node:events:390:28) at SendStream.error (/Users/user/Emerge/flow/node_modules/.pnpm/send@0.17.2/node_modules/send/index.js:270:17) at SendStream.onStatError (/Users/user/Emerge/flow/node_modules/.pnpm/send@0.17.2/node_modules/send/index.js:421:12) at next (/Users/user/Emerge/flow/node_modules/.pnpm/send@0.17.2/node_modules/send/index.js:763:28) at /Users/user/Emerge/flow/node_modules/.pnpm/send@0.17.2/node_modules/send/index.js:771:23 at FSReqCallback.oncomplete (node:fs:198:21)

Your Example Website or App

https://stackblitz.com/edit/node-xkwl6v?file=app%2Froutes%2Findex.tsx

Steps to Reproduce the Bug or Issue

See stackblitz. Just install v10 branch and get any example loading

Expected behavior

As a developer I except the compiler to be happy so that there is peace in the world

Screenshots or Videos

No response

Platform

• OS: MacOS latest
• Browser: Chrome latest
• Version: v10

Additional context

No response

[moklick]

I added an UMD build in v10.1.0. React Flow works with Stackblitz and Remix now.

[abc3354]

I found a workaround ! https://github.com/remix-run/remix/issues/109#issuecomment-1083822747