mdx-editor
MDXEditor seems not to work with React 19RC
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:
- 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
That seems like multiple versions of React and/or Lexical, or maybe an invalid React setup.
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?
@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.
Not sure what’s going on but switching back to React 18 removes all errors for me
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
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