`@blocknote/react` doesn't work with React 19 RC

TypeCellOS / BlockNote

A React Rich Text Editor that's block-based (Notion style) and extensible. Built on top of Prosemirror and Tiptap.

https://www.blocknotejs.org/

Mozilla Public License 2.0

6.31k stars 433 forks source link

`@blocknote/react` doesn't work with React 19 RC #1021

Open leonsilicon opened 3 weeks ago

leonsilicon commented 3 weeks ago

Describe the bug @blocknote/react doesn't work with React 19 RC as it uses React internals CleanShot 2024-08-21 at 14 25 54

To Reproduce https://stackblitz.com/edit/github-ekywvq?file=package.json

Misc

Node version: 20.16.0
Package manager: bun
Browser: Arc
[ ] I'm a sponsor and would appreciate if you could look into this sooner than later 💖

YousefED commented 2 weeks ago

Thanks @leonsilicon. I don't think this is because BlockNote uses internal APIs, but because we have a peerdependency:

 "peerDependencies": {
    "react": "^18",
    "react-dom": "^18"
  },

This will cause react 18 to be installed in node_modules/@blocknote/react/node_modules, causing two different react runtimes side by side.

I haven't tested upgrading this myself, but perhaps this pointer could work. I recommend checking and testing blocknote by checking out your own copy and upgrading the peer dependency and running the tests.

What are you building with BlockNote btw?

leonsilicon commented 2 weeks ago

Ah, sorry I initially saw the error stacktrace point to a file in the @blocknote/react node_modules folder (dist/blocknote-react.js) and assumed it was Blocknote-specific code; upon a second look it seems like that's actually React 18's JSX Runtime library code react-jsx-runtime.(development|production).js bundled into Blocknote's distribution build.

I'm not sure how one would make that bundled jsx-runtime code compatible with both React 18 and 19 but in the meantime will try bumping the peerDependencies and rebuilding to see if that fixes the issue!