mdx-editor / mdx-editor/editor
MDXEditor seems not to work with React 19RC
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 3.7k
- Forks
- 307
- Avg merge
- 14h 22m
- Merged PRs (30d)
- 5
Description
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the failure through src/common/components/MarkdownEditor.tsx with React 19 RC and the reported MDXEditor integration. Trace the useContext, invalid-element, and invalid-hook-call stack frames through EditorRootElement and RealmWithPlugins. Done means the editor renders without these errors and warnings under React 19 RC.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100