Skip to content

Bug: NODE_ENV checks break tests with Vitest 3 #7064

@nstepien

Description

@nstepien

Lexical version: 0.23.1

Steps To Reproduce

  1. Import Lexical modules
  2. Run tests in Vitest 3
  3. Unexpected modules get imported.
    For example, I've seen these 3 files get imported for @lexical/react/LexicalComposerContext when running tests:
    • node_modules/@lexical/react/LexicalComposerContext.dev.mjs good
    • node_modules/@lexical/react/LexicalComposerContext.node.mjs unclear why this is imported
    • node_modules/@lexical/react/LexicalComposerContext.prod.mjs bad, we're not in prod, and leads to conflicts/crashes

Link to code example: https://stackblitz.com/edit/facebook-lexical-daeb4mtf?file=vite.config.ts,src%2Fmy.test.tsx

Run npm t in the code example above, you should get this error:

Error: Minified Lexical error #8; visit https://lexical.dev/docs/error?code=8 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at eval (file:///home/projects/facebook-lexical-daeb4mtf/node_modules/@lexical/react/LexicalComposerContext.prod.mjs:26:297)
    at u (file:///home/projects/facebook-lexical-daeb4mtf/node_modules/@lexical/react/LexicalComposerContext.prod.mjs:26:702)
    at ToolbarPlugin (/home/projects/facebook-lexical-daeb4mtf/src/my.test.tsx:7:3)
    at renderWithHooks (/home/projects/facebook-lexical-daeb4mtf/node_modules/react-dom/cjs/react-dom.development.js:15486:18)
    at mountIndeterminateComponent (/home/projects/facebook-lexical-daeb4mtf/node_modules/react-dom/cjs/react-dom.development.js:20103:13)
    at beginWork (/home/projects/facebook-lexical-daeb4mtf/node_modules/react-dom/cjs/react-dom.development.js:21626:16)
    at HTMLUnknownElement.callCallback (/home/projects/facebook-lexical-daeb4mtf/node_modules/react-dom/cjs/react-dom.development.js:4164:14)
    at HTMLUnknownElement.callTheUserObjectsOperation (/home/projects/facebook-lexical-daeb4mtf/node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
    at innerInvokeEventListeners (/home/projects/facebook-lexical-daeb4mtf/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:350:25)
    at invokeEventListeners (/home/projects/facebook-lexical-daeb4mtf/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:286:3)
Error: Uncaught [Error: Minified Lexical error #8; visit https://lexical.dev/docs/error?code=8 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.]
    at reportException (/home/projects/facebook-lexical-daeb4mtf/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
    at innerInvokeEventListeners (/home/projects/facebook-lexical-daeb4mtf/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:353:9)
    at invokeEventListeners (/home/projects/facebook-lexical-daeb4mtf/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:286:3)
    at HTMLUnknownElementImpl._dispatch (/home/projects/facebook-lexical-daeb4mtf/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:233:9)
    at HTMLUnknownElementImpl.dispatchEvent (/home/projects/facebook-lexical-daeb4mtf/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:104:17)
    at HTMLUnknownElement.dispatchEvent (/home/projects/facebook-lexical-daeb4mtf/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:241:34)
    at Object.invokeGuardedCallbackDev (/home/projects/facebook-lexical-daeb4mtf/node_modules/react-dom/cjs/react-dom.development.js:4213:16)
    at invokeGuardedCallback (/home/projects/facebook-lexical-daeb4mtf/node_modules/react-dom/cjs/react-dom.development.js:4277:31)
    at beginWork$1 (/home/projects/facebook-lexical-daeb4mtf/node_modules/react-dom/cjs/react-dom.development.js:27490:7)
    at performUnitOfWork (/home/projects/facebook-lexical-daeb4mtf/node_modules/react-dom/cjs/react-dom.development.js:26599:12) Error: Minified Lexical error #8; visit https://lexical.dev/docs/error?code=8 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at eval (file:///home/projects/facebook-lexical-daeb4mtf/node_modules/@lexical/react/LexicalComposerContext.prod.mjs:26:297)
    at u (file:///home/projects/facebook-lexical-daeb4mtf/node_modules/@lexical/react/LexicalComposerContext.prod.mjs:26:702)
    at ToolbarPlugin (/home/projects/facebook-lexical-daeb4mtf/src/my.test.tsx:7:3)
    at renderWithHooks (/home/projects/facebook-lexical-daeb4mtf/node_modules/react-dom/cjs/react-dom.development.js:15486:18)
    at mountIndeterminateComponent (/home/projects/facebook-lexical-daeb4mtf/node_modules/react-dom/cjs/react-dom.development.js:20103:13)
    at beginWork (/home/projects/facebook-lexical-daeb4mtf/node_modules/react-dom/cjs/react-dom.development.js:21626:16)
    at HTMLUnknownElement.callCallback (/home/projects/facebook-lexical-daeb4mtf/node_modules/react-dom/cjs/react-dom.development.js:4164:14)
    at HTMLUnknownElement.callTheUserObjectsOperation (/home/projects/facebook-lexical-daeb4mtf/node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
    at innerInvokeEventListeners (/home/projects/facebook-lexical-daeb4mtf/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:350:25)
    at invokeEventListeners (/home/projects/facebook-lexical-daeb4mtf/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:286:3)
The above error occurred in the <ToolbarPlugin> component:

    at ToolbarPlugin
    at p
    at Component

The current behavior

Both development and production modules get imported in tests.

The expected behavior

Only development modules should be imported in tests.

Impact of fix

This is breaking tests when I tried updating from Vitest 2 to Vitest 3.

In node_modules/@lexical/react/LexicalComposerContext.node.mjs, the prod module is imported because NODE_ENV is "test".
The fix would look like this:

-const mod = await (process.env.NODE_ENV === 'development' ? import('./LexicalComposerContext.dev.mjs') : import('./LexicalComposerContext.prod.mjs'));
+const mod = await (process.env.NODE_ENV === 'production' ? import('./LexicalComposerContext.prod.mjs') : import('./LexicalComposerContext.dev.mjs'));

This should be applied in all the other files where NODE_ENV is checked.

Related issue in Vitest: vitest-dev/vitest#7070
Regardless of whether or not this should be fixed in Vitest, I think tests should use the development modules, not the production modules.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions