BlockNote icon indicating copy to clipboard operation
BlockNote copied to clipboard

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

Open leonsilicon opened this issue 1 year ago • 2 comments

Describe the bug @blocknote/react doesn't work with React 19 RC as it uses React internals blocknote 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 💖

leonsilicon avatar Aug 21 '24 21:08 leonsilicon

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?

YousefED avatar Aug 24 '24 09:08 YousefED

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!

leonsilicon avatar Aug 24 '24 18:08 leonsilicon

struggling with this currently and saw this. makes sense now. ill test out bumping the peerdeps

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?

KingXP-Pythoner avatar Sep 27 '24 22:09 KingXP-Pythoner

struggling with this currently and saw this. makes sense now. ill test out bumping the peerdeps

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?

update: I was unable to do a rebuild as I kept running into errors. i'm a noob when it comes to low-level library stuff. will just have to wait till blocknote supports react 19 when it comes out :)

KingXP-Pythoner avatar Oct 05 '24 02:10 KingXP-Pythoner

Still facing the same issue, peerDependencies don't help at all.

irakli2206 avatar Oct 27 '24 19:10 irakli2206

Still facing the same issue, peerDependencies don't help at all.

Good news is there's a PR already for this 😁

KingXP-Pythoner avatar Oct 27 '24 20:10 KingXP-Pythoner

A new PR? I don't see one open -- I'm still facing the same issue in the screenshot, after updating BlockNote and my app to Next.js 15

oconnorjohnson avatar Oct 28 '24 00:10 oconnorjohnson

A new PR? I don't see one open -- I'm still facing the same issue in the screenshot, after updating BlockNote and my app to Next.js 15

PR #1173

KingXP-Pythoner avatar Oct 28 '24 00:10 KingXP-Pythoner

@YousefED Thank you for working on this so quickly!

ryleyrandall22 avatar Oct 28 '24 15:10 ryleyrandall22