MDXEditor seems not to work with React 19RC

Question

MDXEditor seems not to work with React 19RC

Opened this issue 4 months ago · 6 comments

I know official support does not exist yet, but I wanted to try it as I'll be moving to React 19 pretty soon. When I first tried switching to React 19 I had gotten some errors on peerDependencies but was able to resolve those by using npmrc legacy-peer-deps=true.
But now that I'm able to compile and run I get quite a few warnings/errors as listed below. I was wondering if anyone has tried mdxeditor with React 19?

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
at EditorRootElement (http://localhost:5173/node_modules/.vite/deps/@mdxeditor_editor.js?v=5adf7104:35765:28)
at RealmWithPlugins (http://localhost:5173/node_modules/.vite/deps/@mdxeditor_editor.js?v=5adf7104:12508:29)
at http://localhost:5173/node_modules/.vite/deps/@mdxeditor_editor.js?v=5adf7104:35819:43
at MarkdownEditor (http://localhost:5173/src/common/components/MarkdownEditor.tsx:15:34)
at section
at div
at WriteStory (http://localhost:5173/src/pages/write/WriteStory.tsx?t=1718286465426:38:19)
at RenderedRoute (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=5adf7104:3653:5)
at Outlet (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=5adf7104:4024:26)
at div
at div
at Layout (http://localhost:5173/src/common/components/Layout.tsx?t=1718286779685:18:70)
at Write (http://localhost:5173/src/pages/write/Write.tsx?t=1718286779685:17:21)
at RenderedRoute (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=5adf7104:3653:5)
at RenderErrorBoundary (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=5adf7104:3613:5)
at DataRoutes (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=5adf7104:4766:5)
at Router (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=5adf7104:4031:15)
at RouterProvider (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=5adf7104:4583:5)
at UiApiProvider (http://localhost:5173/src/common/context/UiApiContext.tsx:15:41)
at SolflareProvider (http://localhost:5173/src/common/context/SolflareContext.tsx:14:44)
at App

Error handled by React Router default ErrorBoundary: TypeError: Cannot read properties of null (reading 'useContext')
at Object.useContext6 [as useContext] (react.development.js:1618:21)
at x (index.js:372:15)
at v (index.js:412:13)
at EditorRootElement (MDXEditor.js:67:35)
at renderWithHooks (react-dom-client.development.js:13311:18)
at updateFunctionComponent (react-dom-client.development.js:17932:20)
at beginWork (react-dom-client.development.js:19838:16)
at performUnitOfWork (react-dom-client.development.js:28367:12)
at workLoopSync (react-dom-client.development.js:28076:5)
at renderRootSync (react-dom-client.development.js:28031:7)
at DefaultErrorComponent (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=5adf7104:3581:15)
at RenderErrorBoundary (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=5adf7104:3613:5)
at DataRoutes (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=5adf7104:4766:5)
at Router (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=5adf7104:4031:15)
at RouterProvider (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=5adf7104:4583:5)
at UiApiProvider (http://localhost:5173/src/common/context/UiApiContext.tsx:15:41)
at SolflareProvider (http://localhost:5173/src/common/context/SolflareContext.tsx:14:44)
at App

Answer 1 · 2024-06-14T14:35:39.000Z

That seems like multiple versions of React and/or Lexical, or maybe an invalid React setup.

Answer 2 · 2024-06-23T14:44:34.000Z

I ran into a similar issue. It turned out to be multiple React versions installed. Shouldn't MDXEditor specify React as a peerDependency instead of a dependency to avoid installing multiple versions?

Answer 3 · 2024-06-23T18:12:42.000Z

@xcrzx agreed, it should. It should also use Lexical as a peer dependency for similar reasons. I plan on releasing a major version that does it.

Answer 4 · 2024-06-23T19:15:16.000Z

Not sure what’s going on but switching back to React 18 removes all errors for me

Answer 5 · 2024-08-05T08:14:51.000Z

I see that gurx does not have react as peer-dep and I think for this reason react is being imported twice in my project (from my node modules and gurx node modules), because of that I get 'multiple react versions' error:

https://github.com/mdx-editor/gurx/blob/master/package.json#L50

Answer 6 · 2024-08-05T08:22:26.000Z

Adding resolve option for 'react' and 'react-dom' fixed, the issue, this will be fixed for all when gurx does not use react as direct dep

https://stackoverflow.com/questions/34706817/how-prevent-multiple-copies-of-react-from-loading