T
TanStack2mo ago
flat-fuchsia

Lexical import breaks app in production

I'm using lexical as rich text editor, and when the app is deployed to lambda + cloudfront I get the following error: "errorType":"Error","errorMessage":"Cannot find module '/var/task/node_modules/@lexical/react/LexicalComposer.node.mjs' imported from /var/task/index.mjs","trace":["Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/var/task/node_modules/@lexical/react/LexicalComposer.node.mjs' imported from /var/task/index.mjs"," at finalizeResolution (node:internal/modules/esm/resolve:287:11)"," at moduleResolve (node:internal/modules/esm/resolve:956:10)"," at moduleResolveWithNodePath (node:internal/modules/esm/resolve:1192:14)"," at defaultResolve (node:internal/modules/esm/resolve:1235:79)"," at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:642:12)"," at #cachedDefaultResolve (node:internal/modules/esm/loader:591:25)"," at ModuleLoader.resolve (node:internal/modules/esm/loader:574:38)"," at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:236:38)"," at ModuleJob._link (node:internal/modules/esm/module_job:130:49)"]} Any idea on what's wrong?
11 Replies
stormy-gold
stormy-gold2mo ago
I ran into a similar issue on another project, I'm using nitro and had some time constraints, so worked around it by including all of the lexical libraries in the nitro config to make sure they were bundled correctly. If you're using nitro, you can create a nitro.config.ts and then you just do something like
export default defineNitroConfig({
externals: {
traceInclude: [
'node_modules/lexical/Lexical.node.mjs',
]
}
})
export default defineNitroConfig({
externals: {
traceInclude: [
'node_modules/lexical/Lexical.node.mjs',
]
}
})
There were a lot of them though. If you want, I can copy the list that I added
flat-fuchsia
flat-fuchsiaOP2mo ago
if you can it would be helpful!
stormy-gold
stormy-gold2mo ago
Sure. There's about 60of them. I've split it across a couple of messages because of character limits:
//nitro.config.ts
export default defineNitroConfig({
externals: {
traceInclude: [
'node_modules/lexical/Lexical.node.mjs',
'node_modules/@lexical/devtools-core/LexicalDevtoolsCore.node.mjs',
'node_modules/@lexical/utils/LexicalUtils.node.mjs',
'node_modules/@lexical/overflow/LexicalOverflow.node.mjs',
'node_modules/@lexical/html/LexicalHtml.node.mjs',
'node_modules/@lexical/offset/LexicalOffset.node.mjs',
'node_modules/@lexical/table/LexicalTable.node.mjs',
'node_modules/@lexical/code/LexicalCode.node.mjs',
'node_modules/@lexical/hashtag/LexicalHashtag.node.mjs',
'node_modules/@lexical/react/useLexicalNodeSelection.node.mjs',
'node_modules/@lexical/react/LexicalCollaborationPlugin.node.mjs',
'node_modules/@lexical/react/LexicalAutoFocusPlugin.node.mjs',
'node_modules/@lexical/react/LexicalAutoLinkPlugin.node.mjs',
'node_modules/@lexical/react/LexicalDraggableBlockPlugin.node.mjs',
'node_modules/@lexical/react/LexicalContentEditable.node.mjs',
'node_modules/@lexical/react/LexicalTypeaheadMenuPlugin.node.mjs',
'node_modules/@lexical/react/LexicalCollaborationContext.node.mjs',
'node_modules/@lexical/react/LexicalNestedComposer.node.mjs',
//nitro.config.ts
export default defineNitroConfig({
externals: {
traceInclude: [
'node_modules/lexical/Lexical.node.mjs',
'node_modules/@lexical/devtools-core/LexicalDevtoolsCore.node.mjs',
'node_modules/@lexical/utils/LexicalUtils.node.mjs',
'node_modules/@lexical/overflow/LexicalOverflow.node.mjs',
'node_modules/@lexical/html/LexicalHtml.node.mjs',
'node_modules/@lexical/offset/LexicalOffset.node.mjs',
'node_modules/@lexical/table/LexicalTable.node.mjs',
'node_modules/@lexical/code/LexicalCode.node.mjs',
'node_modules/@lexical/hashtag/LexicalHashtag.node.mjs',
'node_modules/@lexical/react/useLexicalNodeSelection.node.mjs',
'node_modules/@lexical/react/LexicalCollaborationPlugin.node.mjs',
'node_modules/@lexical/react/LexicalAutoFocusPlugin.node.mjs',
'node_modules/@lexical/react/LexicalAutoLinkPlugin.node.mjs',
'node_modules/@lexical/react/LexicalDraggableBlockPlugin.node.mjs',
'node_modules/@lexical/react/LexicalContentEditable.node.mjs',
'node_modules/@lexical/react/LexicalTypeaheadMenuPlugin.node.mjs',
'node_modules/@lexical/react/LexicalCollaborationContext.node.mjs',
'node_modules/@lexical/react/LexicalNestedComposer.node.mjs',
'node_modules/@lexical/react/useLexicalSubscription.node.mjs',
'node_modules/@lexical/react/LexicalSelectionAlwaysOnDisplay.node.mjs',
'node_modules/@lexical/react/LexicalListPlugin.node.mjs',
'node_modules/@lexical/react/LexicalCheckListPlugin.node.mjs',
'node_modules/@lexical/react/LexicalHorizontalRulePlugin.node.mjs',
'node_modules/@lexical/react/LexicalCharacterLimitPlugin.node.mjs',
'node_modules/@lexical/react/LexicalTableOfContentsPlugin.node.mjs',
'node_modules/@lexical/react/useLexicalEditable.node.mjs',
'node_modules/@lexical/react/LexicalNodeContextMenuPlugin.node.mjs',
'node_modules/@lexical/react/LexicalPlainTextPlugin.node.mjs',
'node_modules/@lexical/react/LexicalNodeMenuPlugin.node.mjs',
'node_modules/@lexical/react/LexicalBlockWithAlignableContents.node.mjs',
'node_modules/@lexical/react/LexicalEditorRefPlugin.node.mjs',
'node_modules/@lexical/react/LexicalTreeView.node.mjs',
'node_modules/@lexical/react/LexicalMarkdownShortcutPlugin.node.mjs',
'node_modules/@lexical/react/LexicalTabIndentationPlugin.node.mjs',
'node_modules/@lexical/react/LexicalClearEditorPlugin.node.mjs',
'node_modules/@lexical/react/LexicalAutoEmbedPlugin.node.mjs',
'node_modules/@lexical/react/LexicalOnChangePlugin.node.mjs',
'node_modules/@lexical/react/LexicalNodeEventPlugin.node.mjs',
'node_modules/@lexical/react/LexicalComposerContext.node.mjs',
'node_modules/@lexical/react/LexicalErrorBoundary.node.mjs',
'node_modules/@lexical/react/LexicalComposer.node.mjs',
'node_modules/@lexical/react/LexicalDecoratorBlockNode.node.mjs',
'node_modules/@lexical/react/LexicalContextMenuPlugin.node.mjs',
'node_modules/@lexical/react/LexicalTablePlugin.node.mjs',
'node_modules/@lexical/react/LexicalHistoryPlugin.node.mjs',
'node_modules/@lexical/react/useLexicalTextEntity.node.mjs',
'node_modules/@lexical/react/LexicalClickableLinkPlugin.node.mjs',
'node_modules/@lexical/react/useLexicalIsTextContentEmpty.node.mjs',
'node_modules/@lexical/react/useLexicalSubscription.node.mjs',
'node_modules/@lexical/react/LexicalSelectionAlwaysOnDisplay.node.mjs',
'node_modules/@lexical/react/LexicalListPlugin.node.mjs',
'node_modules/@lexical/react/LexicalCheckListPlugin.node.mjs',
'node_modules/@lexical/react/LexicalHorizontalRulePlugin.node.mjs',
'node_modules/@lexical/react/LexicalCharacterLimitPlugin.node.mjs',
'node_modules/@lexical/react/LexicalTableOfContentsPlugin.node.mjs',
'node_modules/@lexical/react/useLexicalEditable.node.mjs',
'node_modules/@lexical/react/LexicalNodeContextMenuPlugin.node.mjs',
'node_modules/@lexical/react/LexicalPlainTextPlugin.node.mjs',
'node_modules/@lexical/react/LexicalNodeMenuPlugin.node.mjs',
'node_modules/@lexical/react/LexicalBlockWithAlignableContents.node.mjs',
'node_modules/@lexical/react/LexicalEditorRefPlugin.node.mjs',
'node_modules/@lexical/react/LexicalTreeView.node.mjs',
'node_modules/@lexical/react/LexicalMarkdownShortcutPlugin.node.mjs',
'node_modules/@lexical/react/LexicalTabIndentationPlugin.node.mjs',
'node_modules/@lexical/react/LexicalClearEditorPlugin.node.mjs',
'node_modules/@lexical/react/LexicalAutoEmbedPlugin.node.mjs',
'node_modules/@lexical/react/LexicalOnChangePlugin.node.mjs',
'node_modules/@lexical/react/LexicalNodeEventPlugin.node.mjs',
'node_modules/@lexical/react/LexicalComposerContext.node.mjs',
'node_modules/@lexical/react/LexicalErrorBoundary.node.mjs',
'node_modules/@lexical/react/LexicalComposer.node.mjs',
'node_modules/@lexical/react/LexicalDecoratorBlockNode.node.mjs',
'node_modules/@lexical/react/LexicalContextMenuPlugin.node.mjs',
'node_modules/@lexical/react/LexicalTablePlugin.node.mjs',
'node_modules/@lexical/react/LexicalHistoryPlugin.node.mjs',
'node_modules/@lexical/react/useLexicalTextEntity.node.mjs',
'node_modules/@lexical/react/LexicalClickableLinkPlugin.node.mjs',
'node_modules/@lexical/react/useLexicalIsTextContentEmpty.node.mjs',
'node_modules/@lexical/react/LexicalHorizontalRuleNode.node.mjs',
'node_modules/@lexical/react/LexicalLinkPlugin.node.mjs',
'node_modules/@lexical/react/LexicalRichTextPlugin.node.mjs',
'node_modules/@lexical/react/LexicalHashtagPlugin.node.mjs',
'node_modules/@lexical/dragon/LexicalDragon.node.mjs',
'node_modules/@lexical/markdown/LexicalMarkdown.node.mjs',
'node_modules/@lexical/link/LexicalLink.node.mjs',
'node_modules/@lexical/mark/LexicalMark.node.mjs',
'node_modules/@lexical/rich-text/LexicalRichText.node.mjs',
'node_modules/@lexical/text/LexicalText.node.mjs',
'node_modules/@lexical/yjs/LexicalYjs.node.mjs',
'node_modules/@lexical/list/LexicalList.node.mjs',
'node_modules/@lexical/selection/LexicalSelection.node.mjs',
'node_modules/@lexical/history/LexicalHistory.node.mjs',
'node_modules/@lexical/plain-text/LexicalPlainText.node.mjs',
'node_modules/@lexical/clipboard/LexicalClipboard.node.mjs',
],
}
})
'node_modules/@lexical/react/LexicalHorizontalRuleNode.node.mjs',
'node_modules/@lexical/react/LexicalLinkPlugin.node.mjs',
'node_modules/@lexical/react/LexicalRichTextPlugin.node.mjs',
'node_modules/@lexical/react/LexicalHashtagPlugin.node.mjs',
'node_modules/@lexical/dragon/LexicalDragon.node.mjs',
'node_modules/@lexical/markdown/LexicalMarkdown.node.mjs',
'node_modules/@lexical/link/LexicalLink.node.mjs',
'node_modules/@lexical/mark/LexicalMark.node.mjs',
'node_modules/@lexical/rich-text/LexicalRichText.node.mjs',
'node_modules/@lexical/text/LexicalText.node.mjs',
'node_modules/@lexical/yjs/LexicalYjs.node.mjs',
'node_modules/@lexical/list/LexicalList.node.mjs',
'node_modules/@lexical/selection/LexicalSelection.node.mjs',
'node_modules/@lexical/history/LexicalHistory.node.mjs',
'node_modules/@lexical/plain-text/LexicalPlainText.node.mjs',
'node_modules/@lexical/clipboard/LexicalClipboard.node.mjs',
],
}
})
That was all of them from my list. I kind of went the nuclear option because each time i added some, more would appear.
flat-fuchsia
flat-fuchsiaOP2mo ago
thanks will give it a try
flat-fuchsia
flat-fuchsiaOP2mo ago
Seems like it is still not working... This is what my vite.config.ts looks like
flat-fuchsia
flat-fuchsiaOP2mo ago
cc @Manuel Schiller @Tarr any clue on why nothing really changed?
stormy-gold
stormy-gold2mo ago
In our version, we're building it as a node-server as we just run it from a container rather than a lambda. That version also uses an older version where I created the nitro.config.ts as a file, rather than through the nitro plugin. I can try and reproduce it as a lambda tomorrow. Looking at the plugin, it seems to take the incoming configuration and merge it with some defaults, but none of them appear to touch the externals section
stormy-gold
stormy-gold2mo ago
I think it is "working" in the sense of it's including them, but it looks like there might be even more of them overall. For the base, * I have created a new tanstack start application and imported lexical using npm install --save lexical @lexical/react from the documentation. * I have created an editor route and just copied their base example from the docs. * I have added your preset settings for AWS lambda to the nitroV2Plugin configuration. * I have added this command to just try and run the server manually to package.json's scripts: "serve": "node --env-file=.env .output/server/index.mjs", I'm not really expecting the server to fully load up as i'm sure i'm missing other parts of setting up a lambda (the project I ran is just building the project into a container, so simpler. when running npm run build && npm run serve , i was able to see the same message that you're seeing. Specifically adding that row to the traceinclude did remove the error and show the next one. Adding my entire list does change the nature of the error message to another that's missing. I think your two options are to play whack-a-mole and run the build and serve, adding each missing library to traceInclude array until it works, or add them all using a command like find node_modules/@lexical -type f -name "*.node.mjs" -printf "'%p',\n" and then add them all to the traceInclude. You'll only then need to add 'node_modules/lexical/Lexical.node.mjs', as well and you should no longer get that error message.
No description
stormy-gold
stormy-gold2mo ago
note: mine still fails, but I don't think I can actually run the aws lambda setup in the way I tried, so it probably needs extra steps to ensure it's working after that, but I assume that yours is more readily setup if you have it going to production already!
fair-rose
fair-rose2mo ago
please provie a full reproducer project
flat-fuchsia
flat-fuchsiaOP2mo ago
IDK @Tarr , this is still failing for me, i used the find command, everything seems to be there but when deployed to lambda this is still failing i used sst to deploy it if it helps

Did you find this page helpful?