Unrecognized extension value in extension set ([object Object]) when adding basicSetup

[fcoury]

Here's the full code of the component in question:

import {
  Button,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
} from '@chakra-ui/react';
import { basicSetup } from '@codemirror/basic-setup';
import { indentWithTab } from '@codemirror/commands';
import { javascript } from '@codemirror/lang-javascript';
import { Extension } from '@codemirror/state';
import { EditorView, keymap, ViewUpdate } from '@codemirror/view';
import { useEffect, useMemo, useState } from 'react';
import { Node } from 'react-flow-renderer';
import CodeMirror from 'rodemirror';

type RuleEditorProps = {
  node: Node;
  isOpen: boolean;
  onSave: (rule: string) => void;
  onClose: () => void;
};

const DEFAULT_RULE = `(function(_providers) {
  // rule logic goes here
    \n
  return { nextState: "", attributes: {} };
  /* eslint-disable no-undef */
})(_providers)\n`;

export default function RuleEditor(props: RuleEditorProps) {
  const { node, isOpen, onSave, onClose } = props;
  const { state } = node.data;

  const [value, setValue] = useState(state.rule || DEFAULT_RULE);
  const [editorView, setEditorView] = useState<EditorView | null>(null);

  const handleSave = () => {
    onSave(value);
    onClose();
  };

  const handleClose = () => {
    onClose();
  };

  const handleChange = (v: ViewUpdate) => {
    if (v.docChanged) {
      setValue(v.state.doc.toString());
    }
  };

  useEffect(() => {
    if (!editorView) return;

    const pos = value.indexOf('here\n');
    const transaction = editorView.state.update({
      selection: { anchor: pos + 7, head: pos + 7 },
    });

    editorView.focus();
    editorView.dispatch(transaction);
  }, [editorView]);

  const extensions = useMemo<Extension[]>(() => [basicSetup, keymap.of([indentWithTab]), javascript()], []);

  return (
    <Modal isOpen={isOpen} onClose={handleClose} isCentered>
      <ModalOverlay />
      <ModalContent maxW="56rem">
        <ModalHeader>Rule Editor - {node.data.label}</ModalHeader>
        <ModalCloseButton />
        <ModalBody>
          <CodeMirror
            extensions={extensions}
            value={value}
            onUpdate={handleChange}
            onEditorViewChange={(editorView) => setEditorView(editorView)}
          />
        </ModalBody>

        <ModalFooter>
          <Button size="sm" onClick={handleSave} colorScheme="blue">
            Save
          </Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
}

And here's the stack trace:

react-dom.development.js:12023 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 flatten (index.js:2008:5)
    at Configuration.resolve (index.js:1916:25)
    at EditorState.create (index.js:2741:43)
    at index.js:70:31
    at commitHookEffectListMount (react-dom.development.js:23049:26)
    at commitPassiveMountOnFiber (react-dom.development.js:24816:13)

EDIT: In case it's relevant, here's also package.json:

{
  "name": "cognito-editor",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "test": "env TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\" }' mocha -r ts-node/register 'src/**/*.test.ts'",
    "test:watch": "env TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\" }' mocha -w -r ts-node/register 'src/**/*.test.ts'",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "dependencies": {
    "@chakra-ui/icons": "^2.0.1",
    "@chakra-ui/react": "^2.1.2",
    "@codemirror/basic-setup": "^0.20.0",
    "@codemirror/commands": "^6.0.0",
    "@codemirror/lang-javascript": "^6.0.0",
    "@codemirror/state": "^6.0.0",
    "@codemirror/view": "^6.0.0",
    "@crinkles/digl": "^0.4.0",
    "@emotion/react": "^11",
    "@emotion/styled": "^11",
    "@types/lodash": "^4.14.182",
    "eslint-config-prettier": "^8.5.0",
    "eslint-config-react-app": "^7.0.1",
    "eslint-plugin-mocha": "^10.0.5",
    "framer-motion": "^6",
    "lodash": "^4.17.21",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-flow-renderer": "^10.3.5",
    "react-icons": "^4.4.0",
    "rodemirror": "^1.6.7",
    "zustand": "^4.0.0-rc.1"
  },
  "devDependencies": {
    "@babel/core": "^7.18.2",
    "@storybook/addon-actions": "^6.5.8",
    "@storybook/addon-essentials": "^6.5.8",
    "@storybook/addon-interactions": "^6.5.8",
    "@storybook/addon-links": "^6.5.8",
    "@storybook/builder-vite": "^0.1.36",
    "@storybook/react": "^6.5.8",
    "@storybook/testing-library": "^0.0.11",
    "@types/chai": "^4.3.1",
    "@types/mocha": "^9.1.1",
    "@types/node": "^17.0.38",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "@vitejs/plugin-react": "^1.3.0",
    "babel-loader": "^8.2.5",
    "chai": "^4.3.6",
    "mocha": "^10.0.0",
    "simple-zustand-devtools": "^1.0.1",
    "ts-node": "^10.8.0",
    "typescript": "^4.6.3",
    "vite": "^2.9.9"
  }
}

If I remove basicSetup from the list of extensions, it works. Any hints?

[fcoury]

OK, after checking the dependencies on your example projects, I found that I needed to update all my @codemirror/* dependencies to ^0.19 on my package.json file. Here's the final file for future reference in case someone experiences the same issue:

{
  "name": "cognito-editor",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "test": "env TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\" }' mocha -r ts-node/register 'src/**/*.test.ts'",
    "test:watch": "env TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\" }' mocha -w -r ts-node/register 'src/**/*.test.ts'",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "dependencies": {
    "@chakra-ui/icons": "^2.0.1",
    "@chakra-ui/react": "^2.1.2",
    "@codemirror/basic-setup": "^0.19.0",
    "@codemirror/commands": "^0.19",
    "@codemirror/lang-javascript": "^0.19",
    "@codemirror/state": "^0.19",
    "@codemirror/view": "^0.19",
    "@crinkles/digl": "^0.4.0",
    "@emotion/react": "^11",
    "@emotion/styled": "^11",
    "@types/lodash": "^4.14.182",
    "eslint-config-prettier": "^8.5.0",
    "eslint-config-react-app": "^7.0.1",
    "eslint-plugin-mocha": "^10.0.5",
    "framer-motion": "^6",
    "lodash": "^4.17.21",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-flow-renderer": "^10.3.5",
    "react-icons": "^4.4.0",
    "rodemirror": "^1.6.7",
    "zustand": "^4.0.0-rc.1"
  },
  "devDependencies": {
    "@babel/core": "^7.18.2",
    "@storybook/addon-actions": "^6.5.8",
    "@storybook/addon-essentials": "^6.5.8",
    "@storybook/addon-interactions": "^6.5.8",
    "@storybook/addon-links": "^6.5.8",
    "@storybook/builder-vite": "^0.1.36",
    "@storybook/react": "^6.5.8",
    "@storybook/testing-library": "^0.0.11",
    "@types/chai": "^4.3.1",
    "@types/mocha": "^9.1.1",
    "@types/node": "^17.0.38",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "@vitejs/plugin-react": "^1.3.0",
    "babel-loader": "^8.2.5",
    "chai": "^4.3.6",
    "mocha": "^10.0.0",
    "simple-zustand-devtools": "^1.0.1",
    "ts-node": "^10.8.0",
    "typescript": "^4.6.3",
    "vite": "^2.9.9"
  }
}

It might be a good idea to add this info to instructions, and feel free to close this issue.

Thanks!

[sachinraja]

Yeah CodeMirror has interesting install behavior, worsened by the fact that it (was) not following semver yet. Looks like someone opened an issue at codemirror/dev#858. I'm ok with clarifying in the docs that this is only a small wrapper and any errors are likely due to CodeMirror and not this package.

[ymc9]

I ran into the same problem and spent quite a lot of time until seeing @fcoury 's solution. Thank you for saving my day! Codemirror folks please make the default installation work.

[stefanprobst]

i think the issue is that @codemirror/basic-setup is deprecated (and still depending on the v0.20 packages) and has been renamed to just codemirror. see https://discuss.codemirror.net/t/codemirror-6-0-has-been-released/4498

[poacher2k]

i think the issue is that @codemirror/basic-setup is deprecated (and still depending on the v0.20 packages) and has been renamed to just codemirror. see https://discuss.codemirror.net/t/codemirror-6-0-has-been-released/4498

This looks correct.

import { basicSetup } from 'codemirror';

Works for me