Bug: PNPM does not match registered node

[onisaint]

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

[acywatson]

That's super weird. If you clear the cache and rebuild the dependencies/lock file, do you get the same result?

[onisaint]

It happens on a fresh build

[zurfyx]

For reference, this error means that the class reference is not the same. We've seen this same error when imports are not exactly the same (though the point to the same file (i.e. import from . and import from 'lexical') and the bundler generates a copy of the file. In which case, if you have registered a HeadingNode with a different import than $createHeadingNode it would error. That said, I'm not sure how your setup looks like and why it's be erroring but that'd be a good starting point to dig deeper.

[onisaint]

@zurfyx the issue appears for node_modules installed with pnpm,

codesandbox with workspaces

codesandbox basic setup,

the reproduction links are above

[khanakia]

Both codesanbox seems to be working fine i do not see any error in codesandbox links you shared

[onisaint]

@khanakia can you type in # and space , as MarkdownShortcuts - plugin is registered, it throws the error

[khanakia]

Check it seems to work

https://user-images.githubusercontent.com/2174170/229275519-be779e20-7d70-4d96-b57e-1b32909e2ae8.mov

[onisaint]

https://user-images.githubusercontent.com/8987882/229289587-c30038e6-2d2b-4800-958d-eafb79231a4c.mov

@khanakia did you start with pnpm i ?

[khanakia]

Yes check below screenshot of history

[onisaint]

can you clear cache, and try pnpm i && pnpm dev

[khanakia]

Check video, please

https://user-images.githubusercontent.com/2174170/229292618-fdd26adf-bf6a-43b3-a63d-21644d79e745.mov

[onisaint]

@khanakia what is your pnpm version ?

[khanakia]

➜  lexical git:(main) ✗ pnpm --version
8.1.0

[onisaint]

yup pnpm@8.x.x changelog and above works, but not for pnpm@7.x.x

[onisaint]

codesandbox and i was using 7.x.x , 8.x.x got released last week, Many thanks @khanakia :)

[alamothe]

Have exact same problem in a Yarn PNP monorepo.

Everything else works except # and space, what makes it special?

[aanavadiya03]

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.

[nujhong]

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