SSR Error: "require is not defined" with @lexical/react as dependency in Astro

[0xtimsb]

Astro Info

Astro                    v4.4.11
Node                     v20.10.0
System                   macOS (arm64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/mdx
                         @astrojs/sitemap
                         @astrojs/react
                         @astrojs/tailwind

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

During SSR builds with Astro, I encounter a "require is not defined" error that traces back to @lexical/react/LexicalHistoryPlugin.js. This issue arises after configuring noExternal in Astro's Vite configuration to ensure proper handling of CommonJS dependencies which @mdxeditor/editor relies on, including @lexical/react and others. The aim was to mitigate a separate issue where named exports from these CommonJS modules were not being recognized.

Error Message:

10:02:29 [ERROR] require is not defined
  Stack trace:
    at /Users/username/site/node_modules/@lexical/react/LexicalHistoryPlugin.js:8:51
    [...]

Additional Context:

1. Initial Issue with Named Exports: The configuration adjustment was initially triggered by an error relating to named exports from CommonJS modules, specifically:

   Named export '$isElementNode' not found. The requested module 'lexical' is a CommonJS module...
   

2. Configuration for noExternal: To address this, the following configurations were made in astro.config.mjs, targeting a better integration of these CommonJS dependencies into the SSR build process:

   vite: {
     ssr: {
       noExternal: [
         "@mdxeditor/editor",
         "@lexical/react",
         "@lexical/rich-text",
         "@lexical/html",
         "@lexical/selection",
         "@lexical/utils",
         "lexical",
       ],
     },
   }

3. Compatibility Note: Interestingly, @mdxeditor/editor (along with its related dependencies) operates correctly in a simpler React + Vite environment, suggesting the issue might be specific to how Astro's SSR engine manages these CommonJS modules.

What's the expected result?

The expected result is for Astro to successfully complete the SSR build without encountering module resolution errors, allowing @mdxeditor/editor and its dependencies to be integrated seamlessly in an Astro project.

Link to Minimal Reproducible Example

Codesandbox Link

Participation

• I am willing to submit a pull request for this issue.

[bluwy]

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.