[BUG] Lexical import error using Astro (Vite)

[0xtimsb]

If you want to ask for support or request features, sponsor the project and contact me over email.

• [x] I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• [x] I have read the documentation and cannot find an answer.

Describe the bug SyntaxError An error occurred. 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; Stack Trace file:///Users/smitbarmase/site/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:132:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:214:5)
at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)
at async nodeImport (file:///Users/smitbarmase/site/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54796:17)
at async ssrImport (file:///Users/smitbarmase/site/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54696:24)
at async eval (/Users/smitbarmase/site/src/components/Editor.tsx:4:31)
at async instantiateModule (file:///Users/smitbarmase/site/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54758:9)

Reproduction Codesandbox link

To Reproduce Steps to reproduce the behavior:

1. Create Astro project
2. Install and import component like this import { MDXEditor, headingsPlugin } from "@mdxeditor/editor";
3. npm run dev

Expected behavior It should build on dev.

Screenshots

Desktop (please complete the following information):

• OS: MacOS
• Browser: Chrome

Additional context Add any other context about the problem here.

[0xtimsb]

Might be related: https://github.com/vitejs/vite/issues/14332 https://github.com/facebook/lexical/pull/5618

[petyosi]

I'm afraid I'm not familiar with the Astro stack to help you with this. Vanilla Vite works out of the box, you can check some of the adjustments that were made for Next and Remix - perhaps this will give you some clue.

[0xtimsb]

@petyosi https://github.com/withastro/astro/issues/10353#issuecomment-1983613912 can you look into this?

[petyosi]

@petyosi withastro/astro#10353 (comment) can you look into this?

I gave you directions in my previous reply, which you did not take into account.

If you expect me to support you and find solutions for your technology of choice, sponsor the project.

[the-wc]

Thank you for your work here, @petyosi.

I think this might become a common issue you'll see listed here. This issue isn't isolated to Astro. I've replicated this via remix-vite:

• vite-plugin-cjs-interop => same error
• ClientOnly via remix-utils => same error
• noExternal gives a different error, but it's faulty because (as what @smitbarmase references):

I don't think this is an Astro issue. When you noExternal a dependency in Vite (especially in dev), you're also saying that the dependency is entirely written in ESM, however @lexical/react isn't written in ESM, so the issue arises.

I think we should fix step 1 first (Initial Issue with Named Export), instead of making the rest work. The issue can be replicated by creating a test.mjs file with:

import "@mdxeditor/editor";

And running node test.mjs. The @mdxeditor/editor package is not Node-friendly and should be fixed instead.

[petyosi]

@the-wc I'm not following the latest development of remix closely, noticed that they're moving to vite. There's a working mdxeditor in remix setup, https://github.com/mdx-editor/mdx-editor-in-remix. As far as I can tell, ClientOnly works as expected. You can fork that example and show me what's going on to help further.

Up to your quote above, this package is unlikely to be node friendly anytime soon, for a few reasons:

• Lexical is CJS only
• The markdown utils are ESM only
• And, last, but not least, I see zero sense in rendering it on the server given its function.

I greatly appreciate effective help and contributions on the matter in the sense of concrete, reproducible issues that take into account the directions I've given so far. "Does not work" and "same error" are not enough, unfortunately.

[david10sing]

@petyosi

I am also getting this issue with a project I am working on and I have pushed a PR to upgrade lexical. Hopefully it fixes the problem but it might not be as simple as that and the fix might need to happen in the lexical library.

https://github.com/mdx-editor/editor/pull/402

Look forward to any feedback.

Cheers