React 18 support

[fosple]

Hey team,

Are you planning to add support for React 18? Currently plate is only supporting react 17 as far as I can tell.

Btw, thanks for developing the plugin system. It is really helping a lot and makes my code way more clear :)

Best fosple

[zbeyens]

There is plan for it. I did a quick try a few weeks ago and got an issue with first render of Plate being blank. I need to investigate that.

[mlajtos]

@zbeyens Hey, I tried Slate with React 18 and it seems broken in dev mode – sometimes I got blank editor even though the content was there and everything is wonky. However, it looks suspiciously okay in prod mode.

[zbeyens]

First render is blank, next renders work well. We'll need to track down that issue.

[davevilela]

hey @zbeyens , i'm getting this error with the following versions:

 "react": "^18.1.0",
 "react-dom": "^18.1.0",
 "next": "12.1.4",
"@udecode/plate": "^11.0.6",

tried the following fix, but couldn't get it working:

https://github.com/react-dnd/react-dnd/issues/3416

[michaelwills]

@davevilela yeah I had to use patch-package for that. https://www.npmjs.com/package/patch-package but that's a sparate issue due to the version being imported by plate currently.

[davevilela]

@michaelwills I ended up downgrading to React 17 for the time being.

[jeysal]

Regarding the react-dnd issue, I forced react-dnd to version 16 instead of version 15 using Yarn resolutions, which is compatible with React 18, and also appears to be compatible with plate (at least with respect to the features we use) even though it is out of dependency range.

[zbeyens]

Attempt to fix react-dnd https://github.com/udecode/plate/pull/1564

[jeffsee55]

@zbeyens would it be helpful to report React 18 bugs? Is there a certain type of issue related to React 18? I'm using Plate via @udecode/plate-headless and didn't run into too many issues. Just some odd behavior with voids (the code sandbox example shows that the editor doesn't fire onChange events when the selects the void before anything else in the editor)

https://codesandbox.io/s/sandpack-project-forked-yghykw?file=/index.tsx

[tmilewski]

One thing to call out is that the usage of styled-components in Plate will be OK with React 18, but it will kill any SSR streaming support. See: https://github.com/reactwg/react-18/discussions/110

With some of the changes currently being made, it'll hopefully be a non-issue soon enough, but I wanted to call it out for anyone who winds up here looking for more information before that's complete.

[zbeyens]

Can you report any issue with Plate 17?

[sdanfa]

With Plate 18.3.0, I'm getting the same issue. I tried yarn resolutions forcing but I keep getting the same error even cleaning the yarn cache. Could you please help?

[dylans]

React 18 and esm and next and TypeScript and Node.js 16 or 18 and isomorphic code a world where some dependencies are esm-only, some are cjs-only, and some claim to be esm but aren't actually esm is a lot of fun.

That said, we do have the latest plate and Slate working fine in the above environment.

For us it required yarn patch for slate-yjs, styled-jsx, and yjs. And within our monorepo we've ended up isolating Next.js in its own subpackage.

It's a bit of a pain all around given the above, but there's nothing in Plate that's currently breaking things afaik.

[sdanfa]

React 18 and esm and next and TypeScript and Node.js 16 or 18 and isomorphic code a world where some dependencies are esm-only, some are cjs-only, and some claim to be esm but aren't actually esm is a lot of fun.

That said, we do have the latest plate and Slate working fine in the above environment.

For us it required yarn patch for slate-yjs, styled-jsx, and yjs. And within our monorepo we've ended up isolating Next.js in its own subpackage.

It's a bit of a pain all around given the above, but there's nothing in Plate that's currently breaking things afaik.

I see, I could get remirror (another react editor) working with nextjs (node and react) though. I guess debugging this would take time.