[BUG] Plugins and Remix v2.9.1: `Error [ERR_REQUIRE_ESM]: require() of ES Module /node_modules/@mdxeditor/editor/dist/index.js not supported.`
Opened this issue · 4 comments
If you want to ask for support or request features, sponsor the project and contact me over email.
- I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
- I have read the documentation and cannot find an answer.
Describe the bug
It's not a bug, but a really PITA for installation with Remix, related to CJS / ESM
I started from indie stack: https://github.com/remix-run/indie-stack
here is the important files I think:
package.json
I needed to install manually parse-entities
and lexical
tsconfig.json
just here to let you know
vite.config.ts
the pita here was to add this
ssr: {
noExternal: [
"@mdxeditor",
"ccount",
"devlop",
"stringify-entities",
"vfile-message",
/^micromark.*/,
/^estree.*/,
/^unist.*/,
/^mdast.*/,
/^zwitch.*/,
"longest-streak",
"decode-named-character-reference",
/^character-entities.*/,
"markdown-table",
"fault",
"parse-entities",
/^character-reference.*/,
/^is-.*/,
"escape-string-regexp",
/^remix-utils.*/,
"is-ip",
"ip-regex",
"super-regex",
"clone-regexp",
"function-timeout",
"time-span",
"convert-hrtime",
"is-regexp",
],
},
remix.config.js
same as the vite.config.ts
but for serverDependenciesToBundle
field
MDXCustomEditor.tsx
I added all the possible extensions there, inspired from your Live demo https://github.com/mdx-editor/editor/blob/main/src/examples/site-demo.tsx
finally I used it this way,
import { ClientOnly } from "remix-utils/client-only";
<ClientOnly fallback={<div>Loading...</div>}>
{() => (
<div className="border border-gray-500 rounded prose max-w-full">
<MDXCustomEditor markdown={markdown} onChange={setMarkdown} />
</div>
)}
</ClientOnly>
I just want to open the issue here to
- let the dev team that this is not easy for me - but maybe I did some mistakes?
- let Remix's users how I finally succeded
once it's installed, it's a fabulous job you did there! much better and easier than draft.js or slate
thanks !
There's a Remix section on the start page of the docs that points to a working sample repository. Let me know how can I make this easier to discover - what did you try and how did you miss this?
here it is: mdx-editor/mdx-editor-in-remix#2
the problem is when adding some plugins, look at this PR
arnaudambro/mdx-editor-in-remix#2
Error [ERR_REQUIRE_ESM]: require() of ES Module /mdx-editor-in-remix/node_modules/@mdxeditor/editor/dist/index.js from /mdx-editor-in-remix/build/index.js not supported.
Instead change the require of /mdx-editor-in-remix/node_modules/@mdxeditor/editor/dist/index.js in /mdx-editor-in-remix/build/index.js to a dynamic import() which is available in all CommonJS modules.