MDXEditor seems not to work with React 19RC

[jsoneaday]

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?

Cannot read properties of null (reading 'useContext')
TypeError: Cannot read properties of null (reading 'useContext')
at Object.useContext6 [as useContext] (http://localhost:5173/node_modules/.vite/deps/@mdxeditor_editor.js?v=5adf7104:1174:29)
at x (http://localhost:5173/node_modules/.vite/deps/@mdxeditor_editor.js?v=5adf7104:12266:35)
at v (http://localhost:5173/node_modules/.vite/deps/@mdxeditor_editor.js?v=5adf7104:12306:14)
at EditorRootElement (http://localhost:5173/node_modules/.vite/deps/@mdxeditor_editor.js?v=5adf7104:35767:35)
at renderWithHooks (http://localhost:5173/node_modules/.vite/deps/react-dom_client.js?v=5adf7104:9809:26)
at updateFunctionComponent (http://localhost:5173/node_modules/.vite/deps/react-dom_client.js?v=5adf7104:13140:28)
at beginWork (http://localhost:5173/node_modules/.vite/deps/react-dom_client.js?v=5adf7104:14352:22)
at performUnitOfWork (http://localhost:5173/node_modules/.vite/deps/react-dom_client.js?v=5adf7104:19992:20)
at workLoopSync (http://localhost:5173/node_modules/.vite/deps/react-dom_client.js?v=5adf7104:19815:13)
at renderRootSync (http://localhost:5173/node_modules/.vite/deps/react-dom_client.js?v=5adf7104:19789:17)

console.js:273 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
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

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:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. 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

[petyosi]

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

[xcrzx]

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?

[petyosi]

@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.

[jsoneaday]

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

[tautvilas]

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

[tautvilas]

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