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

Question

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

Closed this issue 3 months ago · 2 comments

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 codemirror/dev#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

Answer 1 · 2024-06-05T05:51:00.000Z

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

Answer 2 · 2024-07-02T06:43:28.000Z

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