react-codemirror: Error: Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks

I have successfully replicated this issue and created a repo with the minimal amount of steps taken to reproduce the error. View the commit history for detailed steps.

https://github.com/mbartisan/react-codemirror-issue

– Main points:

Created a new electron forge application: https://www.electronforge.io/templates/typescript-+-webpack-template npm init electron-app@latest my-new-app -- --template=webpack-typescript

Installed react and react-dom npm i react react-dom

Installed @uiw/react-codemirror and @codemirror/lang-javascript npm i @uiw/react-codemirror @codemirror/lang-javascript

Then followed the basic usage from the @uiw/react-codemirror readme.

import React from 'react';
import CodeMirror from '@uiw/react-codemirror';
import { javascript } from '@codemirror/lang-javascript';

function App() {
  const onChange = React.useCallback((value, viewUpdate) => {
    console.log('value:', value);
  }, []);
  return (
    <CodeMirror
      value="console.log('hello world!');"
      height="200px"
      extensions={[javascript({ jsx: true })]}
      onChange={onChange}
    />
  );
}
export default App;

Uncaught Error: Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.

My issue was originating from webpack and I was able to adjust my webpack config to resolve it. My fix was to add this to the webpack config:

// webpack.config.js
const path = require('path');

module.exports = {
  resolve: {
    alias: {
      '@codemirror/state': path.resolve(__dirname, 'node_modules/@codemirror/state'),
    }
  }
};

Edit: I continued to have some other various issues (mostly with Extensions) which were fixed by mapping to the entire codemirror dir like below. Not fully tested, so your milage may very as well as introduce side effects.

// webpack.config.js
const path = require('path');

module.exports = {
  resolve: {
    alias: {
      '@codemirror': path.resolve(__dirname, 'node_modules/@codemirror/'),
    }
  }
};

Clearing your package lock and reinstalling your dependencies often helps with this.

Can you put your code samples on codesandbox.io? I can help you troubleshoot the errors.

@zeleniucvladislav

• https://github.com/uiwjs/react-codemirror/issues/216