ViteJS crash react-codemirror

[barreiros]

Hi.

When I add the package @replit/codemirror-vim to my project in combination with @uiwjs/react-codemirror and ViteJS the browser returns an error

I have tried other alternative as using Babel instead ViteJS and to using codemirror vanilla npm packageand instead react-codemirror and everything works well.

[vite] connecting...
client.ts:53 [vite] connected.
index.js:2004 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 (index.js:2004:23)
    at inner (index.js:1979:17)
    at inner (index.js:1979:17)
    at inner (index.js:1979:17)
    at flatten4 (index.js:2008:5)
    at Configuration4.resolve (index.js:1916:25)
    at EditorState4.create (index.js:2741:43)
    at useCodeMirror.ts:103:40
    at invokePassiveEffectCreate (react-dom.development.js:23487:20)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:3945:14)
inner @ index.js:2004
inner @ index.js:1979
inner @ index.js:1979
inner @ index.js:1979
flatten4 @ index.js:2008
resolve @ index.js:1916
create @ index.js:2741
(anonymous) @ useCodeMirror.ts:103
invokePassiveEffectCreate @ react-dom.development.js:23487
callCallback2 @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
flushPassiveEffectsImpl @ react-dom.development.js:23574
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
(anonymous) @ react-dom.development.js:23324
workLoop @ scheduler.development.js:417
flushWork @ scheduler.development.js:390
performWorkUntilDeadline @ scheduler.development.js:157
react-dom.development.js:20085 The above error occurred in the <CodeMirror> component:

    at http://localhost:3000/node_modules/.vite/deps/@uiw_react-codemirror.js?v=356e78c7:63856:5
    at App (http://localhost:3000/src/App.jsx:5:1)

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 @ react-dom.development.js:20085
update.callback @ react-dom.development.js:20118
callCallback @ react-dom.development.js:12318
commitUpdateQueue @ react-dom.development.js:12339
commitLifeCycles @ react-dom.development.js:20736
commitLayoutEffects @ react-dom.development.js:23426
callCallback2 @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23151
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
flushPassiveEffectsImpl @ react-dom.development.js:23620
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
(anonymous) @ react-dom.development.js:23324
workLoop @ scheduler.development.js:417
flushWork @ scheduler.development.js:390
performWorkUntilDeadline @ scheduler.development.js:157
scheduler.development.js:171 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 (index.js:2004:23)
    at inner (index.js:1979:17)
    at inner (index.js:1979:17)
    at inner (index.js:1979:17)
    at flatten4 (index.js:2008:5)
    at Configuration4.resolve (index.js:1916:25)
    at EditorState4.create (index.js:2741:43)
    at useCodeMirror.ts:103:40
    at invokePassiveEffectCreate (react-dom.development.js:23487:20)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:3945:14)

Regards.

[jaywcjlove]

@barreiros https://codesandbox.io/embed/gracious-snyder-xnurn4?fontsize=14&hidenavigation=1&theme=dark

I see your error, it may be caused by inconsistent versions of dependencies. https://github.com/uiwjs/react-codemirror/issues/216

[barreiros]

@jaywcjlove fixed!

As @karlhorky mentioned, I have used Overrides in package.json.

"overrides": {
  "@codemirror/state": "6.0.1"
}

Thanks!