lexical: Bug: PNPM does not match registered node

Mono-repo projects with pnpm throws the following error for RichText

Error: Create node: Type heading in node HeadingNode does not match registered node HeadingNode with the same type
    at errorOnTypeKlassMismatch (Lexical.dev.js:4556:13)
    at new LexicalNode (Lexical.dev.js:3566:9)
    at new ElementNode (Lexical.dev.js:8148:5)
    at new HeadingNode (LexicalRichText.dev.js:167:5)
    at Object.$createHeadingNode (LexicalRichText.dev.js:322:40)
    at LexicalMarkdown.dev.js:921:21
    at LexicalMarkdown.dev.js:846:18
    at runElementTransformers (LexicalMarkdown.dev.js:565:7)
    at transform (LexicalMarkdown.dev.js:781:9)
    at LexicalMarkdown.dev.js:831:7

works well with monorepo from yarn / npm

Lexical version: 0.8.1, 0.9.1

Steps To Reproduce

projects using pnpm instead of yarn / npm

in the demo below type # and space, what should happen: convert node to heading node what happens: throws error

Link to code example: codesandbox with workspaces

codesandbox basic setup

About this issue

Original URL
State: closed
Created a year ago
Comments: 18 (7 by maintainers)

Commits related to this issue

fix: update pnpm and enable corepack ref: https://github.com/facebook/lexical/issues/4225 — committed to MH4GF/richtext-editor-for-github by MH4GF a year ago

Most upvoted comments

Running into the same issue in Yarn PNP, basically the package is duplicated (reference). It’s likely due to @lexical/rich-text setting @lexical/selection as peerDependencies other than dependencies, as how other packages do.

Problem goes away after making sure there’s only one instance.

❯ yarn info @lexical/rich-text --virtuals -AR                                                                                                                                                        (lexical|●49✚10…22⚑13)
├─ @lexical/rich-text@npm:0.14.2
│  ├─ Instances: 2
│  └─ Version: 0.14.2
│
├─ @lexical/rich-text@npm:0.14.2 [555d8]
│  ├─ Version: 0.14.2
│  │ 
│  └─ Peer dependencies
│     ├─ @lexical/clipboard@0.14.2 → npm:0.14.2 [a2a1e]
│     ├─ @lexical/selection@0.14.2 → npm:0.13.1 [555d8]
│     ├─ @lexical/utils@0.14.2 → npm:0.14.2 [a2a1e]
│     ├─ @types/lexical@* → ✘
│     ├─ @types/lexical__clipboard@* → ✘
│     ├─ @types/lexical__selection@* → ✘
│     ├─ @types/lexical__utils@* → ✘
│     └─ lexical@0.14.2 → npm:0.14.2
│
└─ @lexical/rich-text@npm:0.14.2 [a2a1e]
   ├─ Version: 0.14.2
   │ 
   └─ Peer dependencies
      ├─ @lexical/clipboard@0.14.2 → npm:0.14.2 [a2a1e]
      ├─ @lexical/selection@0.14.2 → npm:0.14.2 [a2a1e]
      ├─ @lexical/utils@0.14.2 → npm:0.14.2 [a2a1e]
      ├─ @types/lexical@* → ✘
      ├─ @types/lexical__clipboard@* → ✘
      ├─ @types/lexical__selection@* → ✘
      ├─ @types/lexical__utils@* → ✘
      └─ lexical@0.14.2 → npm:0.14.2

nujhong on Mar 26, 2024

I also facing this problem in a Yarn PNP monorepo. HeadingNode and QuoteNode which are imported from @lexical/rich-text, generating the same error with # and > for heading and quote. Everything else working fine. Using ToolbarPlugin if I select heading and quote block then it is adding those node in the DOM and showing heading and quote block.

aanavadiya03 on Feb 21, 2024