@lexical/text/LexicalText.js does not provide an export named '$canShowPlaceholderCurry'

[0x77dev]

Error encountered:

Uncaught (in promise) SyntaxError: The requested module '/_nuxt/@fs/***/node_modules/lexical-vue/node_modules/@lexical/text/LexicalText.js?v=0f92231a' does not export '$canShowPlaceholderCurry' (at index.js?v=0f92231a:3:10)

Using the latest Nuxt 3 on Bun, below is a sample component to replicate the issue:

<script setup>
import {
  LexicalComposer,
  LexicalContentEditable,
  LexicalHistoryPlugin,
  LexicalOnChangePlugin,
  LexicalPlainTextPlugin
} from 'lexical-vue'

const initialConfig = {
  namespace: 'ChatPaper',
  theme: {
    ltr: 'text-left',
    rtl: 'text-right',
    paragraph: 'my-4',
    quote: 'border-l-4 pl-4 italic',
    heading: {
      h1: 'text-4xl font-bold my-2',
      h2: 'text-3xl font-bold my-2',
      h3: 'text-2xl font-bold my-2',
      h4: 'text-xl font-bold my-2',
      h5: 'text-lg font-bold my-2',
      h6: 'text-base font-bold my-2'
    },
    list: {
      nested: {
        listitem: 'pl-4'
      },
      ol: 'list-decimal list-inside',
      ul: 'list-disc list-inside',
      listitem: 'mb-2',
      listitemChecked: 'text-green-500',
      listitemUnchecked: 'text-red-500'
    },
    hashtag: 'text-blue-500',
    image: 'max-w-full h-auto',
    link: 'text-blue-500 underline',
    text: {
      bold: 'font-bold',
      code: 'font-mono bg-gray-100 p-1 rounded',
      italic: 'italic',
      strikethrough: 'line-through',
      subscript: 'sub',
      superscript: 'sup',
      underline: 'underline',
      underlineStrikethrough: 'underline line-through'
    },
    code: 'font-mono text-sm bg-gray-100 p-2 rounded',
    codeHighlight: {
      atrule: 'text-purple-500',
      attr: 'text-green-500',
      boolean: 'text-orange-500',
      builtin: 'text-blue-500',
      cdata: 'text-gray-500',
      char: 'text-green-500',
      class: 'text-purple-500',
      'class-name': 'text-purple-500',
      comment: 'text-gray-500 italic',
      constant: 'text-orange-500',
      deleted: 'text-red-500 line-through',
      doctype: 'text-gray-500 italic',
      entity: 'text-red-500',
      function: 'text-blue-500',
      important: 'text-red-500',
      inserted: 'text-green-500',
      keyword: 'text-purple-500',
      namespace: 'text-red-500',
      number: 'text-orange-500',
      operator: 'text-gray-600',
      prolog: 'text-gray-500',
      property: 'text-green-500',
      punctuation: 'text-gray-600',
      regex: 'text-orange-500',
      selector: 'text-purple-500',
      string: 'text-green-500',
      symbol: 'text-orange-500',
      tag: 'text-red-500',
      url: 'text-blue-500 underline',
      variable: 'text-red-500'
    }
  },
  onError: console.error
}
</script>

<template>
  <ClientOnly>
    <LexicalComposer :initial-config="initialConfig">
      <LexicalPlainTextPlugin>
        <template #contentEditable>
          <LexicalContentEditable />
        </template>
        <template #placeholder>
          <div>Enter some text...</div>
        </template>
      </LexicalPlainTextPlugin>
      <LexicalHistoryPlugin />
      <LexicalLinkPlugin />
      <LexicalCheckListPlugin />
      <LexicalTablePlugin />
      <LexicalTabIndentationPlugin />
      <LexicalOnChangePlugin @change="onChange" />
    </LexicalComposer>
  </ClientOnly>
</template>

Versions:

• Bun: 1.0.29
• Node: v20.11.1
• lexical: 0.13.1
• lexical-vue: 0.8.2
• nuxt: 3.10.2

Issue replicates in both Bun and Node environments.

[0x77dev]

The funniest part:

[0x77dev]

Probably a quirky issue occurred with Bun. I uninstalled packages, deleted node_modules, and re-ran bun add lexical lexical-vue. It started working. The <ClientOnly /> wrapper is essential as this lib doesn't work well with SSR. Closing the issue for now.