MdxEditor

[enri90]

Hi, I'm having a compatibility problem with this module mdxeditor

https://mdxeditor.dev/editor/docs/getting-started

import '@mdxeditor/editor/style.css'
import { MDXEditor } from '@mdxeditor/editor/MDXEditor'
import { headingsPlugin } from '@mdxeditor/editor/plugins/headings'

export default Page

function Page() {
  return (
    <MDXEditor markdown='# Hello world' plugins={[headingsPlugin()]} />
  )
}

14:08:03 [vite-plugin-ssr][request(2)] HTTP request: /editor
14:08:03 [vite][request(2)] Error when evaluating SSR module /pages/editor/+Page.tsx: failed to import "@mdxeditor/editor"
|- Error: Cannot find package '/test/node_modules/@mdxeditor/editor/dist/node_modules/react-diff-view/' imported from /test/node_modules/@mdxeditor/editor/dist/plugins/diff-source/DiffViewer.js
    at legacyMainResolve (/test/node_modules/ts-node/dist-raw/node-internal-modules-esm-resolve.js:286:9)
    at packageResolve (/test/node_modules/ts-node/dist-raw/node-internal-modules-esm-resolve.js:750:14)
    at moduleResolve (/test/node_modules/ts-node/dist-raw/node-internal-modules-esm-resolve.js:798:18)
    at Object.defaultResolve (/test/node_modules/ts-node/dist-raw/node-internal-modules-esm-resolve.js:912:11)
    at /test/node_modules/ts-node/src/esm.ts:218:35
    at entrypointFallback (/test/node_modules/ts-node/src/esm.ts:168:34)
    at /test/node_modules/ts-node/src/esm.ts:217:14
    at addShortCircuitFlag (/test/node_modules/ts-node/src/esm.ts:409:21)
    at resolve (/test/node_modules/ts-node/src/esm.ts:197:12)
    at resolve (/test/node_modules/ts-node/src/child/child-loader.ts:15:39)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:838:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
    at link (node:internal/modules/esm/module_job:76:36)
14:08:03 [vite-plugin-ssr][request(2)] HTTP response /editor 500

not work possibility solution

ssr: {
      external: ['@mdxeditor/editor'],
},

14:34:22 [vite-plugin-ssr][request(1)] HTTP request: /editor2
14:34:23 [vite][request(1)] Error when evaluating SSR module /pages/editor2/+Page.tsx: failed to import "@mdxeditor/editor/MDXEditor"
|- file:///Users/enri/test/node_modules/@mdxeditor/editor/dist/exportMarkdownFromLexical.js:1
import { $isElementNode } from "lexical";
         ^^^^^^^^^^^^^^
SyntaxError: Named export '$isElementNode' not found. The requested module 'lexical' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'lexical';
const { $isElementNode } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)

Thank you

[brillout]

Create a minimal reproduction and I'll dig into it.

[brillout]

Can you publish it as a GitHub repo?

[enri90]

done thanks

https://github.com/enri90/MdxEditor-vitejs-ssr

[brillout]

• Fork using pnpm + failed attempt to workaround it: https://github.com/brillout/vps-mdxeditor (feel free to further try to use vite-plugin-cjs-interop).
• Reproduction using Vite SSR without vite-plugin-ssr: https://github.com/brillout/vite-mdxeditor
• Reproduction using Next.js: https://github.com/brillout/next-mdxeditor

Given the fact that MDXEditor doesn't work in any of these setups, the issue should clearly be fixed on MDXEditor's side. I'd open an issue about this over at MDXEditor.

[enri90]

in this case it worksMDXEditor
https://github.com/enri90/mdx-editor-nextjs

const MDXEditor = dynamic(
  () => import('@mdxeditor/editor').then((mod) => mod.MDXEditor), 
  { ssr: false }
)

[brillout]

You can achieve the same with https://vite-plugin-ssr.com/client-only-components.

[petyosi]

MDXEditor author here, @brillout thank you for the help with the issue. I can confirm that MDXEditor has no reason to be rendered on the server - the underlying Lexical framework authors recommend the same when it comes to Next.js.

I forked the repo of the reporter and applied the client-only approach from your docs https://github.com/mdx-editor/MdxEditor-vitejs-ssr, and it works like a charm. Your docs are great, btw.

For the record, I could not reproduce the error with the react-diff-view package. @otakustay - if you've seen something like this, please chime in.

[brillout]

Thanks for chiming in, and MDXEditor looks great 👌.

I've added your comment to the vite-plugin-ssr docs: https://vite-plugin-ssr.com/MDXEditor.