[v3] Error: multiple instances of @codemirror/state are loaded, breaking instanceof checks.

[popmatik]

I'm receiving this error when using the codeInput V3 plugin:

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

Here's my sanity.config.ts:

import {defineConfig} from 'sanity'
import {deskTool} from 'sanity/desk'
import {visionTool} from '@sanity/vision'
import {schemaTypes} from './schemas'
import {codeInput} from '@sanity/code-input'

export default defineConfig({
  name: 'default',
  title: 'blah',

  projectId: 'blah',
  dataset: 'blah',

  plugins: [deskTool(), visionTool(), codeInput()],

  schema: {
    types: schemaTypes,
  },
})

Package.json:

{
  "name": "blah",
  "private": true,
  "version": "1.0.0",
  "main": "package.json",
  "license": "UNLICENSED",
  "scripts": {
    "dev": "sanity dev",
    "start": "sanity start",
    "build": "sanity build",
    "deploy": "sanity deploy",
    "deploy-graphql": "sanity graphql deploy"
  },
  "keywords": [
    "sanity"
  ],
  "dependencies": {
    "@sanity/code-input": "^4.0.0",
    "@sanity/vision": "^3.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-is": "^18.2.0",
    "sanity": "^3.0.0",
    "styled-components": "^5.2.0"
  },
  "devDependencies": {
    "@sanity/eslint-config-studio": "^2.0.1",
    "eslint": "^8.6.0",
    "prettier": "^2.8.4",
    "typescript": "^4.0.0"
  },
  "prettier": {
    "semi": false,
    "printWidth": 100,
    "bracketSpacing": false,
    "singleQuote": true
  }
}

Only one schema in the config - so nothing complex there.
Any ideas?

[rexxars]

Could you do npm ls @codemirror/state or yarn why @codemirror/state (depending on which package manager you're using?

[popmatik]

Sure thing:

info Reasons this module exists

   - "_project_#@codemirror#language" depends on it
   - Hoisted from "_project_#@codemirror#language#@codemirror#state"
   - Hoisted from "_project_#codemirror#@codemirror#state"
   - Hoisted from "_project_#@uiw#react-codemirror#@codemirror#state"
   - Hoisted from "_project_#@codemirror#view#@codemirror#state"
   - Hoisted from "_project_#codemirror#@codemirror#autocomplete#@codemirror#state"
   - Hoisted from "_project_#codemirror#@codemirror#lint#@codemirror#state"
   - Hoisted from "_project_#codemirror#@codemirror#search#@codemirror#state"
   - Hoisted from "_project_#@uiw#react-codemirror#@codemirror#theme-one-dark#@codemirror#state"
   - Hoisted from "_project_#@uiw#react-codemirror#@uiw#codemirror-extensions-basic-setup#@codemirror#state"
   - Hoisted from "_project_#myproject#@sanity#code-input#@codemirror#state"
   - Hoisted from "_project_#codemirror#@codemirror#commands#@codemirror#state"
   - Hoisted from "_project_#myproject#@sanity#code-input#@codemirror#lang-html#@codemirror#state"
   - Hoisted from "_project_#cmsv3#@sanity#vision#@codemirror#lang-javascript#@codemirror#state"
   - Hoisted from "_project_#myproject#@sanity#code-input#@codemirror#lang-markdown#@codemirror#state"
   - Hoisted from "_project_#myproject#@sanity#code-input#@codemirror#lang-php#@codemirror#state"
   - Hoisted from "_project_#myproject#@sanity#code-input#@codemirror#lang-sql#@codemirror#state"
   - Hoisted from "_project_#myproject#@sanity#code-input#@uiw#codemirror-themes#@codemirror#state"
   - Hoisted from "_project_#myproject#@sanity#code-input#@uiw#react-codemirror#@codemirror#state"
   - Hoisted from "_project_#myproject#@sanity#code-input#@codemirror#lang-html#@codemirror#lang-css#@codemirror#state"
   - Hoisted from "_project_#myproject#@sanity#code-input#@codemirror#lang-markdown#@codemirror#language#@codemirror#state"
   - Hoisted from "_project_#myproject#@sanity#code-input#@codemirror#lang-html#@codemirror#language#@codemirror#state"
   - Hoisted from "_project_#myproject#@sanity#code-input#@uiw#react-codemirror#@uiw#codemirror-extensions-basic-setup#@codemirror#state"
   - Hoisted from "_project_#myproject#@sanity#code-input#@codemirror#lang-html#@codemirror#view#@codemirror#state"
   - Hoisted from "_project_#myproject#@sanity#code-input#@codemirror#lang-html#@codemirror#language#@codemirror#view#@codemirror#state"

[dwkns]

Same problem brought me here. Deleting node_modules and yarn.lock and reinstalling dependencies fixed it for me.

[TimHill83]

Same for me

[lucashfreitas]

Same error here.

[karthikkumar27]

@dwkns thanks works after deleting node_modules and package-lock.json and a reinstall. You saved my day!

[hugosandsjo]

Same here. Deleting node_modules and package-lock.json fixed it. Thanks!

[JuanSHincapie]

Just to give an update, if the problem is on a unit test, remember do a mock for codemirror

[frontsideair]

You can also use pnpm dedupe command to fix this.