[BUG] Plugins and Remix v2.9.1: Error [ERR_REQUIRE_ESM]: require() of ES Module /node_modules/@mdxeditor/editor/dist/index.js not supported.

[arnaudambro]

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 !

[petyosi]

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?

[arnaudambro]

You're right, I think all the versions are mixed up in my project

I updated your working repo with the latest versions for all, I'm gonna make a PR... when git is fixed 🥲

[arnaudambro]

here it is: mdx-editor/mdx-editor-in-remix#2

[arnaudambro]

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.