mdx-editor / mdx-editor/editor

MDXEditor seems not to work with React 19RC

Open
#494 6 comments 1 reaction 0 assignees View on GitHub

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:

  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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.