search

mdx-editor / editor

A rich text editor React component for markdown
https://mdxeditor.dev
MIT License
1.57k stars 124 forks source link

[BUG] Diff viewer - Unrecognized extension value in extension set ([object Object]) #479

Closed pbjorklund closed 1 week ago

pbjorklund commented 1 month ago

Setting up diffing from docs https://mdxeditor.dev/editor/docs/diff-source breaks.

// Random setup
    const mdxEditorRef = useRef<MDXEditorMethods>(null);
 ...
    <MDXEditor
                    className="mdx-editor"
                    ref={mdxEditorRef}
                    markdown="helloo"
                    plugins={[
                        diffSourcePlugin({
                            diffMarkdown: "hello",
                        }),
                        tablePlugin(),
                        toolbarPlugin({
                            toolbarContents: () => (
                                <DiffSourceToggleWrapper>
                                    <UndoRedo />
                                </DiffSourceToggleWrapper>
                            ),
                        }),
                    ]}
                />

Seems same like https://github.com/codemirror/dev/issues/608.

Adding this snippet to vite config per a comment there resolves the issue.

    optimizeDeps: {
        exclude: ['@codemirror/state'],
    },

Trace:

chunk-HHIB4OP3.js?v=e4324e82:16659 Uncaught Error: Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks. at inner (chunk-RSUIORXA.js?v=e4324e82:1865:15) at inner (chunk-RSUIORXA.js?v=e4324e82:1845:9) at inner (chunk-RSUIORXA.js?v=e4324e82:1845:9) at inner (chunk-RSUIORXA.js?v=e4324e82:1845:9) at inner (chunk-RSUIORXA.js?v=e4324e82:1845:9) at flatten (chunk-RSUIORXA.js?v=e4324e82:1869:3) at _Configuration.resolve (chunk-RSUIORXA.js?v=e4324e82:1782:21) at _EditorState.create (chunk-RSUIORXA.js?v=e4324e82:2429:39) at new MergeView (@mdxeditor_editor.js?v=c07b5550:88101:30) at @mdxeditor_editor.js?v=c07b5550:88582:30 inner @ chunk-RSUIORXA.js?v=e4324e82:1865 inner @ chunk-RSUIORXA.js?v=e4324e82:1845 inner @ chunk-RSUIORXA.js?v=e4324e82:1845 inner @ chunk-RSUIORXA.js?v=e4324e82:1845 inner @ chunk-RSUIORXA.js?v=e4324e82:1845 flatten @ chunk-RSUIORXA.js?v=e4324e82:1869 resolve @ chunk-RSUIORXA.js?v=e4324e82:1782 create @ chunk-RSUIORXA.js?v=e4324e82:2429 MergeView @ @mdxeditor_editor.js?v=c07b5550:88101 (anonymous) @ @mdxeditor_editor.js?v=c07b5550:88582 commitHookEffectListMount @ chunk-HHIB4OP3.js?v=e4324e82:16904 commitPassiveMountOnFiber @ chunk-HHIB4OP3.js?v=e4324e82:18152 commitPassiveMountEffects_complete @ chunk-HHIB4OP3.js?v=e4324e82:18125 commitPassiveMountEffects_begin @ chunk-HHIB4OP3.js?v=e4324e82:18115 commitPassiveMountEffects @ chunk-HHIB4OP3.js?v=e4324e82:18105 flushPassiveEffectsImpl @ chunk-HHIB4OP3.js?v=e4324e82:19486 flushPassiveEffects @ chunk-HHIB4OP3.js?v=e4324e82:19443 commitRootImpl @ chunk-HHIB4OP3.js?v=e4324e82:19412 commitRoot @ chunk-HHIB4OP3.js?v=e4324e82:19273 performSyncWorkOnRoot @ chunk-HHIB4OP3.js?v=e4324e82:18891 flushSyncCallbacks @ chunk-HHIB4OP3.js?v=e4324e82:9135 (anonymous) @ chunk-HHIB4OP3.js?v=e4324e82:18623 Show 22 more frames Show less chunk-HHIB4OP3.js?v=e4324e82:16659 Uncaught Error: Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks. at inner (chunk-RSUIORXA.js?v=e4324e82:1865:15) at inner (chunk-RSUIORXA.js?v=e4324e82:1845:9) at inner (chunk-RSUIORXA.js?v=e4324e82:1845:9) at inner (chunk-RSUIORXA.js?v=e4324e82:1845:9) at inner (chunk-RSUIORXA.js?v=e4324e82:1845:9) at flatten (chunk-RSUIORXA.js?v=e4324e82:1869:3) at _Configuration.resolve (chunk-RSUIORXA.js?v=e4324e82:1782:21) at _EditorState.create (chunk-RSUIORXA.js?v=e4324e82:2429:39) at new MergeView (@mdxeditor_editor.js?v=c07b5550:88101:30) at @mdxeditor_editor.js?v=c07b5550:88582:30 inner @ chunk-RSUIORXA.js?v=e4324e82:1865 inner @ chunk-RSUIORXA.js?v=e4324e82:1845 inner @ chunk-RSUIORXA.js?v=e4324e82:1845 inner @ chunk-RSUIORXA.js?v=e4324e82:1845 inner @ chunk-RSUIORXA.js?v=e4324e82:1845 flatten @ chunk-RSUIORXA.js?v=e4324e82:1869 resolve @ chunk-RSUIORXA.js?v=e4324e82:1782 create @ chunk-RSUIORXA.js?v=e4324e82:2429 MergeView @ @mdxeditor_editor.js?v=c07b5550:88101 (anonymous) @ @mdxeditor_editor.js?v=c07b5550:88582 commitHookEffectListMount @ chunk-HHIB4OP3.js?v=e4324e82:16904 invokePassiveEffectMountInDEV @ chunk-HHIB4OP3.js?v=e4324e82:18320 invokeEffectsInDev @ chunk-HHIB4OP3.js?v=e4324e82:19697 commitDoubleInvokeEffectsInDEV @ chunk-HHIB4OP3.js?v=e4324e82:19682 flushPassiveEffectsImpl @ chunk-HHIB4OP3.js?v=e4324e82:19499 flushPassiveEffects @ chunk-HHIB4OP3.js?v=e4324e82:19443 commitRootImpl @ chunk-HHIB4OP3.js?v=e4324e82:19412 commitRoot @ chunk-HHIB4OP3.js?v=e4324e82:19273 performSyncWorkOnRoot @ chunk-HHIB4OP3.js?v=e4324e82:18891 flushSyncCallbacks @ chunk-HHIB4OP3.js?v=e4324e82:9135 (anonymous) @ chunk-HHIB4OP3.js?v=e4324e82:18623 Show 21 more frames Show less 2chunk-HHIB4OP3.js?v=e4324e82:14036 The above error occurred in the component:

at DiffViewer (http://localhost:5173/node_modules/.vite/deps/@mdxeditor_editor.js?v=c07b5550:88549:17)
at div
at DiffSourceWrapper (http://localhost:5173/node_modules/.vite/deps/@mdxeditor_editor.js?v=c07b5550:88620:28)
at RenderRecursiveWrappers (http://localhost:5173/node_modules/.vite/deps/@mdxeditor_editor.js?v=c07b5550:33022:34)
at RichTextEditor (http://localhost:5173/node_modules/.vite/deps/@mdxeditor_editor.js?v=c07b5550:32986:14)
at LexicalProvider (http://localhost:5173/node_modules/.vite/deps/@mdxeditor_editor.js?v=c07b5550:32978:26)
at div
at EditorRootElement (http://localhost:5173/node_modules/.vite/deps/@mdxeditor_editor.js?v=c07b5550:33029:28)
at RealmWithPlugins (http://localhost:5173/node_modules/.vite/deps/@mdxeditor_editor.js?v=c07b5550:9626:29)
at http://localhost:5173/node_modules/.vite/deps/@mdxeditor_editor.js?v=c07b5550:33083:43
at div
at div
at div
at div
at Modal (http://localhost:5173/src/components/Global/Modal.tsx:20:3)
at div
at SourceDocuments (http://localhost:5173/src/pages/SourceDocuments.tsx?t=1717506761977:51:49)
at RenderedRoute (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=7b302d45:3554:5)
at Routes (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=7b302d45:3982:5)
at ProtectedRoutes
at ProtectedRoute (http://localhost:5173/src/components/ProtectedRoute.tsx?t=1717506761977:23:20)
at RenderedRoute (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=7b302d45:3554:5)
at Routes (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=7b302d45:3982:5)
at Suspense
at div
at div
at AppContent (http://localhost:5173/src/AppRoutes.tsx?t=1717506761977:31:20)
at Router (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=7b302d45:3925:15)
at BrowserRouter (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=7b302d45:4658:5)
at AppRoutes
at MsalProvider (http://localhost:5173/node_modules/.vite/deps/@azure_msal-react.js?v=749352f3:129:25)

Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. logCapturedError @ chunk-HHIB4OP3.js?v=e4324e82:14036 update.callback @ chunk-HHIB4OP3.js?v=e4324e82:14056 callCallback @ chunk-HHIB4OP3.js?v=e4324e82:10511 commitUpdateQueue @ chunk-HHIB4OP3.js?v=e4324e82:10528 commitLayoutEffectOnFiber @ chunk-HHIB4OP3.js?v=e4324e82:17083 commitLayoutMountEffects_complete @ chunk-HHIB4OP3.js?v=e4324e82:17976 commitLayoutEffects_begin @ chunk-HHIB4OP3.js?v=e4324e82:17965 commitLayoutEffects @ chunk-HHIB4OP3.js?v=e4324e82:17916 commitRootImpl @ chunk-HHIB4OP3.js?v=e4324e82:19349 commitRoot @ chunk-HHIB4OP3.js?v=e4324e82:19273 performSyncWorkOnRoot @ chunk-HHIB4OP3.js?v=e4324e82:18891 flushSyncCallbacks @ chunk-HHIB4OP3.js?v=e4324e82:9135 (anonymous) @ chunk-HHIB4OP3.js?v=e4324e82:18623 Show 13 more frames Show less chunk-HHIB4OP3.js?v=e4324e82:9145 Uncaught Error: Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks. at inner (chunk-RSUIORXA.js?v=e4324e82:1865:15) at inner (chunk-RSUIORXA.js?v=e4324e82:1845:9) at inner (chunk-RSUIORXA.js?v=e4324e82:1845:9) at inner (chunk-RSUIORXA.js?v=e4324e82:1845:9) at inner (chunk-RSUIORXA.js?v=e4324e82:1845:9) at flatten (chunk-RSUIORXA.js?v=e4324e82:1869:3) at _Configuration.resolve (chunk-RSUIORXA.js?v=e4324e82:1782:21) at _EditorState.create (chunk-RSUIORXA.js?v=e4324e82:2429:39) at new MergeView (@mdxeditor_editor.js?v=c07b5550:88101:30) at @mdxeditor_editor.js?v=c07b5550:88582:30

petyosi commented 1 month ago

@pbjorklund Can you help me with a runnable example? The site demo includes the diff source plugin and does not show such a problem.

petyosi commented 1 week ago

@pbjorklund Let me know if you have a reproducible setup.