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

c4lliope · 2021-11-20T23:20:07Z

As in a similar issue, uiwjs/react-codemirror#216
I am using Codemirror libraries directly.

I have a code playground,

import React from "react"
import styled from "styled-components"
import { observer } from "mobx-react"
import { push } from "./core"

import { EditorView, keymap } from "@codemirror/view"
import { lineNumbers } from "@codemirror/gutter"
import { EditorState, basicSetup } from "@codemirror/basic-setup"
import { defaultKeymap } from "@codemirror/commands"
import { javascript } from "@codemirror/lang-javascript"

class Playground extends React.Component {
  state = {
    code: '',
    errors: [],
  }

  constructor(p) {
    super(p)
    this.playgroundNode = React.createRef()
    this.onRecord = this.onRecord.bind(this)
    this.grabCode()

    this.playgroundModel = EditorState.create({
      doc: this.state.code,
      extensions: [
        /*javascript({ config: { jsx: true } }),*/
      /*lineNumbers(), basicSetup, keymap.of(defaultKeymap)*/
      ]
    })

    window.playgroundModel = this.playgroundModel
  }

  componentDidMount() {
    this.playgroundDisplay = new EditorView({
      state: this.playgroundModel,
      parent: this.playgroundNode.current,
    })
  }

  componentDidUpdate(prev) {
    if(prev.address !== this.props.address)
      this.grabCode()
  }

  grabCode() {
    if(!this.props.address) return null

    fetch(`http://${process.env.REACT_APP_HIERARCH_ADDRESS}/source?address=${this.props.address}`)
    .then(response => response.text())
    .then(response => {
      this.setState({ code: response })

      var change = this.playgroundModel.update({changes: {
        from: 0,
        to: this.playgroundModel.doc.length,
        insert: response,
      }})

      if(this.playgroundDisplay) this.playgroundDisplay.dispatch(change)
    })
  }

  onRecord() {
    // check code for errors

    push(
      `http://${process.env.REACT_APP_HIERARCH_ADDRESS}/upgrade`,
      {
        address: this.props.address,
        upgrades: [ { begin: 0, end: -1, grade: this.state.code } ]
      },
    )
  }

  render = () => (
    <>
      <Area lines={(this.state.code || '').split(/\r\n|\r|\n/).length} >
        <div ref={this.playgroundNode} />
      </Area>

      <Clickable onClick={this.onRecord} >
        Record and Reload
      </Clickable>
    </>
  )
}

var Area = styled.div`
height: ${({ lines }) => lines * 1.15 }em;
width: 100%;
`

var Clickable = styled.button`
display: block;
color: #fffefe;
background: #6fa7ec;
border-radius: 0.8rem;
height: 1.6rem;
`

export default observer(Playground)

I commented out the lines for various extensions I've tried running, because each time I use an extension, no mind which kind I use, I see this error.

Running with no extensions leaves me compiled and running happily.

I'm glad for any help you can lend, I need some extensions in my build.

lishid · 2021-11-21T01:07:30Z

This usually happens when your build pipeline decides to mix two copies or different versions of @codemirror/state through the dependency tree. If you're using npm, try running npm list @codemirror/state and see if you have non deduped copies of that package.

c4lliope · 2021-11-21T12:44:09Z

Yes, looks like a number of copies - 0.19.5 and 0.19.6. Any recourse?

eagle:pose grace$ npm list @codemirror/state
[email protected] /Users/grace/place/assemble/pose
├─┬ @codemirror/[email protected]
│ ├─┬ @codemirror/[email protected]
│ │ ├── @codemirror/[email protected]  deduped
│ │ └─┬ @codemirror/[email protected]
│ │   ├── @codemirror/[email protected] 
│ │   └─┬ @codemirror/[email protected]
│ │     └── @codemirror/[email protected]  deduped
│ ├─┬ @codemirror/[email protected]
│ │ ├── @codemirror/[email protected] 
│ │ └─┬ @codemirror/[email protected]
│ │   └── @codemirror/[email protected]  deduped
│ ├─┬ @codemirror/[email protected]
│ │ ├── @codemirror/[email protected] 
│ │ └─┬ @codemirror/[email protected]
│ │   └── @codemirror/[email protected]  deduped
│ ├─┬ @codemirror/[email protected]
│ │ ├── @codemirror/[email protected] 
│ │ └─┬ @codemirror/[email protected]
│ │   └── @codemirror/[email protected]  deduped
│ ├─┬ @codemirror/[email protected]
│ │ ├── @codemirror/[email protected] 
│ │ └─┬ @codemirror/[email protected]
│ │   └── @codemirror/[email protected]  deduped
│ ├─┬ @codemirror/[email protected]
│ │ ├── @codemirror/[email protected] 
│ │ └─┬ @codemirror/[email protected]
│ │   └── @codemirror/[email protected]  deduped
│ ├─┬ @codemirror/[email protected]
│ │ ├── @codemirror/[email protected] 
│ │ └─┬ @codemirror/[email protected]
│ │   └── @codemirror/[email protected]  deduped
│ ├─┬ @codemirror/[email protected]
│ │ ├─┬ @codemirror/[email protected]
│ │ │ ├── @codemirror/[email protected] 
│ │ │ └─┬ @codemirror/[email protected]
│ │ │   └── @codemirror/[email protected]  deduped
│ │ └── @codemirror/[email protected]  deduped
│ ├─┬ @codemirror/[email protected]
│ │ ├── @codemirror/[email protected] 
│ │ └─┬ @codemirror/[email protected]
│ │   └── @codemirror/[email protected]  deduped
│ ├─┬ @codemirror/[email protected]
│ │ ├── @codemirror/[email protected] 
│ │ └─┬ @codemirror/[email protected]
│ │   └── @codemirror/[email protected]  deduped
│ ├─┬ @codemirror/[email protected]
│ │ └── @codemirror/[email protected]  deduped
│ ├── @codemirror/[email protected] 
│ └─┬ @codemirror/[email protected]
│   └── @codemirror/[email protected]  deduped
├─┬ @codemirror/[email protected]
│ └── @codemirror/[email protected]  deduped
├─┬ @codemirror/[email protected]
│ ├─┬ @codemirror/[email protected]
│ │ └── @codemirror/[email protected] 
│ ├── @codemirror/[email protected] 
│ └─┬ @codemirror/[email protected]
│   └── @codemirror/[email protected]  deduped
├─┬ @codemirror/[email protected]
│ └── @codemirror/[email protected] 
├── @codemirror/[email protected] 
└─┬ @codemirror/[email protected]
  └── @codemirror/[email protected]

lishid · 2021-11-21T17:19:23Z

Try adding @codemirror/state to your dependencies and have it target ^0.19.6, perhaps that'll force npm to use the latest version for all of them?

c4lliope · 2021-11-21T17:36:14Z

Nope, that didn't appear to affect the result of npm list @codemirror/state.
Still a mixture of versions, 0.19.6 and 0.19.5.

lishid · 2021-11-21T18:11:18Z

Hmm I think at this point it's going past my area of expertise, one last suggestion might be to run something like npm update. I've also used the trick of deleting package-lock.json and rerun npm install, possibly even starting with a fresh node_modules, but depending on your setup you may want to at least keep backups of your lock file and old node_modules folder before you try that.

c4lliope · 2021-11-21T18:23:34Z

I'm glad you helped Lishid. Can you recommend anyone else who may see some more approaches here? I'm eager to make some more progress.

c4lliope · 2021-11-21T18:36:23Z

Hold on, yarn upgrade; npm list @codemirror/state displays a collapsed hierarchy;

eagle:pose grace$ npm list @codemirror/state
[email protected] /Users/grace/place/assemble/pose
├─┬ @codemirror/[email protected]
│ ├─┬ @codemirror/[email protected]
│ │ ├── @codemirror/[email protected]  deduped
│ │ └─┬ @codemirror/[email protected]
│ │   └── @codemirror/[email protected]  deduped
│ ├─┬ @codemirror/[email protected]
│ │ └── @codemirror/[email protected]  deduped
│ ├─┬ @codemirror/[email protected]
│ │ └── @codemirror/[email protected]  deduped
│ ├─┬ @codemirror/[email protected]
│ │ └── @codemirror/[email protected]  deduped
│ ├─┬ @codemirror/[email protected]
│ │ └── @codemirror/[email protected]  deduped
│ ├─┬ @codemirror/[email protected]
│ │ └── @codemirror/[email protected]  deduped
│ ├─┬ @codemirror/[email protected]
│ │ └── @codemirror/[email protected]  deduped
│ ├─┬ @codemirror/[email protected]
│ │ ├─┬ @codemirror/[email protected]
│ │ │ └── @codemirror/[email protected]  deduped
│ │ └── @codemirror/[email protected]  deduped
│ ├─┬ @codemirror/[email protected]
│ │ └── @codemirror/[email protected]  deduped
│ ├─┬ @codemirror/[email protected]
│ │ └── @codemirror/[email protected]  deduped
│ ├─┬ @codemirror/[email protected]
│ │ └── @codemirror/[email protected]  deduped
│ └── @codemirror/[email protected]  deduped
├─┬ @codemirror/[email protected]
│ └── @codemirror/[email protected]  deduped
├─┬ @codemirror/[email protected]
│ ├─┬ @codemirror/[email protected]
│ │ └── @codemirror/[email protected]  deduped
│ └── @codemirror/[email protected]  deduped
├─┬ @codemirror/[email protected]
│ └── @codemirror/[email protected]  deduped
├── @codemirror/[email protected] 
└─┬ @codemirror/[email protected]
  └── @codemirror/[email protected]  deduped

c4lliope · 2021-11-21T18:38:44Z

Success! Line numbers enabled.

marijnh · 2021-11-21T22:13:41Z

(Often completely removing your package lock and node_modules and reinstalling also helps with this issue.)

karlhorky · 2022-03-17T09:04:07Z

We fixed this in our application by adding a Yarn Resolution to force a single version of @codemirror/state (actually, we already had resolutions of a lot of other CodeMirror packages too, to fix similar breakages):

package.json (note that this is a "resolutions" key, NOT dependencies)

{
  "resolutions": {
    "@codemirror/highlight": "0.19.7",
    "@codemirror/lang-javascript": "0.19.7",
    "@codemirror/state": "0.19.9",
    "@codemirror/view": "0.19.47"
  }
}

fix error in parent package: Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks. codemirror/dev#608

steveruizok · 2022-11-01T08:16:49Z

This same bug also happens if @codemirror/state is not installed as a dependency.

mustafa0x · 2022-11-08T16:53:35Z

Adding the following to vite config seems to fix for me (using pnpm).

    optimizeDeps: {
        exclude: ['@codemirror/state'],
    },

multiplehats · 2022-11-25T18:53:40Z

Adding the following to vite config seems to fix for me (using pnpm).
    optimizeDeps: {
        exclude: ['@codemirror/state'],
    },

Can confirm works for me too.

rupeshpadhye · 2023-05-03T06:21:51Z

tried all suggested solutions, still getting error intermittently. is there solid fix to this

liliangrong777 · 2023-09-13T07:03:31Z

Problems still exist "@uiw/react-codemirror": "^4.21.13",

milahu · 2023-12-28T20:52:45Z

still an issue with the pnpm package manager
it "just works" with npm and yarn but fails with pnpm
see also pnpm/pnpm#5807

adding optimizeDeps.exclude to vite.config.js has no effect

    optimizeDeps: {
        exclude: ['@codemirror/state'],
    },

adding pnpm.overrides to package.json has no effect

{
  // ...
  "pnpm": {
    "overrides": {
      "@codemirror/state": "^6.4.0"
    }
  },
  // ...
}

to reproduce

git clone https://github.com/milahu/codemirror-lang-nix
cd codemirror-lang-nix
git checkout f83529d65a000aaeab219d0e9de53c55b5344b47
pnpm i
npm run build && npm run devbuild && npm run devserve

open the devserver page, error in js console

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

what does pnpm install

This usually happens when your build pipeline decides to mix two copies or different versions of @codemirror/state through the dependency tree. If you're using npm, try running npm list @codemirror/state and see if you have non deduped copies of that package.

yes! this should be in the error message

to find the duplicate install of @codemirror/state, you can also use
find . -path '*/node_modules/@codemirror/state' |
  while read p; do grep -H '"version":' "$p/package.json"; done
the current message is not helpful:

This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.

with npm

$ find . -path '*/node_modules/@codemirror/state' |
  while read p; do grep -H '"version":' "$p/package.json"; done

./node_modules/@codemirror/state/package.json:  "version": "6.4.0",

with yarn

$ find . -path '*/node_modules/@codemirror/state' |
  while read p; do grep -H '"version":' "$p/package.json"; done

./node_modules/@codemirror/state/package.json:  "version": "6.4.0",

with pnpm

$ find . -path '*/node_modules/@codemirror/state' |
  while read p; do grep -H '"version":' "$p/package.json"; done

./node_modules/@codemirror/state/package.json:  "version": "6.4.0",
./node_modules/.pnpm/@[email protected]/node_modules/@codemirror/state/package.json:  "version": "6.4.0",
./node_modules/.pnpm/[email protected]_@[email protected]/node_modules/@codemirror/state/package.json:  "version": "6.4.0",
./node_modules/.pnpm/@[email protected]/node_modules/@codemirror/state/package.json:  "version": "6.4.0",
./node_modules/.pnpm/@[email protected]/node_modules/@codemirror/state/package.json:  "version": "6.4.0",
./node_modules/.pnpm/@[email protected]/node_modules/@codemirror/state/package.json:  "version": "6.4.0",
./node_modules/.pnpm/@[email protected]/node_modules/@codemirror/state/package.json:  "version": "6.4.0",
./node_modules/.pnpm/@[email protected]/node_modules/@codemirror/state/package.json:  "version": "6.4.0",
./node_modules/.pnpm/node_modules/@codemirror/state/package.json:  "version": "6.4.0",
./node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@codemirr_o5ynkp4rjcyr63t72krio2opdq/node_modules/@codemirror/state/package.json:  "version": "6.4.0",
./node_modules/.pnpm/@[email protected]/node_modules/@codemirror/state/package.json:  "version": "6.4.0",

so all @codemirror/state have version 6.4.0
and all @codemirror/state are symlinked to the same node_modules/.pnpm/@[email protected]

possible solution

use "loose instanceof checks"

-  someObject instance of SomeClass
+  someObject.constructor.name == SomeClass.name

> 1 instanceof Number
false

> (1).constructor.name == Number.name
true

sumeetadur · 2024-05-11T09:55:28Z

This same bug also happens if @codemirror/state is not installed as a dependency.

Installing @codemirror/state as a dependency fixed this issue for me

tianshaochuan · 2024-10-16T12:01:20Z

可以尝试在node_modules中@codemirror依赖中所有的包下面各自安装的node_modules全部删掉然后重启解决

c4lliope closed this as completed Nov 21, 2021

jaywcjlove mentioned this issue Dec 13, 2021

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

Closed

andrebnassis mentioned this issue Apr 1, 2022

BUG: unable to set extensions tbjgolden/react-codemirror6#4

Closed

jaywcjlove mentioned this issue Apr 26, 2022

error - TypeError: Cannot redefine property: EditorView uiwjs/react-codemirror#304

Closed

wr8tt5 mentioned this issue May 29, 2022

Codemirror not recognizing returned extensions and throwing "Unrecognized extension value in extension set" FurqanSoftware/codemirror-languageserver#15

Open

MarkChenYutian mentioned this issue Jun 10, 2022

Unrecognized extension value in extension set ([object Object]) #859

Closed

disarticulate mentioned this issue Jun 11, 2022

Upgrade @codemirror/stream-parser to current & sync? [Error: Unrecognized extension value in extension set ([object Object])] #861

Closed

This comment was marked as spam.

Sign in to view

YunKukPark mentioned this issue Jan 7, 2023

Draft [LOG-23] 🎨 markdown editor 제작 CVLOG-project/CVL-frontend#14

Closed

6 tasks

kwasniew mentioned this issue Jun 20, 2023

feat: store playground settings in local storage Unleash/unleash#4012

Merged

yujiahuang mentioned this issue Aug 26, 2023

Error: Unrecognized extension value in extension set ([object Object]) sanity-io/sanity#4699

Open

pbjorklund mentioned this issue Jun 4, 2024

[BUG] Diff viewer - Unrecognized extension value in extension set ([object Object]) mdx-editor/editor#479

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

c4lliope commented Nov 20, 2021

lishid commented Nov 21, 2021

c4lliope commented Nov 21, 2021 •

edited

Loading

lishid commented Nov 21, 2021

c4lliope commented Nov 21, 2021

lishid commented Nov 21, 2021

c4lliope commented Nov 21, 2021 via email •

edited

Loading

c4lliope commented Nov 21, 2021

c4lliope commented Nov 21, 2021

marijnh commented Nov 21, 2021

karlhorky commented Mar 17, 2022 •

edited

Loading

This comment was marked as spam.

steveruizok commented Nov 1, 2022

mustafa0x commented Nov 8, 2022

multiplehats commented Nov 25, 2022

rupeshpadhye commented May 3, 2023 •

edited

Loading

liliangrong777 commented Sep 13, 2023

milahu commented Dec 28, 2023

sumeetadur commented May 11, 2024

tianshaochuan commented Oct 16, 2024

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

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

Comments

c4lliope commented Nov 20, 2021

lishid commented Nov 21, 2021

c4lliope commented Nov 21, 2021 • edited Loading

lishid commented Nov 21, 2021

c4lliope commented Nov 21, 2021

lishid commented Nov 21, 2021

c4lliope commented Nov 21, 2021 via email • edited Loading

c4lliope commented Nov 21, 2021

c4lliope commented Nov 21, 2021

marijnh commented Nov 21, 2021

karlhorky commented Mar 17, 2022 • edited Loading

This comment was marked as spam.

steveruizok commented Nov 1, 2022

mustafa0x commented Nov 8, 2022

multiplehats commented Nov 25, 2022

rupeshpadhye commented May 3, 2023 • edited Loading

liliangrong777 commented Sep 13, 2023

milahu commented Dec 28, 2023

what does pnpm install

possible solution

sumeetadur commented May 11, 2024

tianshaochuan commented Oct 16, 2024

c4lliope commented Nov 21, 2021 •

edited

Loading

c4lliope commented Nov 21, 2021 via email •

edited

Loading

karlhorky commented Mar 17, 2022 •

edited

Loading

rupeshpadhye commented May 3, 2023 •

edited

Loading