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

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 !

Start with the reported ERR_REQUIRE_ESM failure and compare package.json, tsconfig.json, vite.config.ts, remix.config.js, and MDXCustomEditor.tsx from the attached examples. Reproduce the Remix installation path and determine the smallest supported configuration or package change that removes the failure, then verify the editor loads under Remix v2.9.1 without the listed workarounds.