Unrecognized extension value in extension set ([object Object]).

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

CodeMirror 같은 하나의 라이브러리에 여러 확장프로그램을 사용하는 경우 동일한 패키지가 여러 인스턴스로 로드될 때 발생하는 에러입니다.

 

해당 글은 @codemirror/state 패키지를 다루고 있지만 위 상황과 동일한 모든 문제점에 대해 해결방안이 될 수 있습니다.

1. 중복 패키지 확인

# npm ls [중복이 일어난 패키지]
npm ls @codemirror/state

여러 버전의 @codemirror/state 패키지가 중복되는 상황 확인

# 결과
+-- @codemirror/lang-sql@6.4.0
| +-- @codemirror/autocomplete@6.4.2
| | `-- @codemirror/state@6.2.0 deduped✅
| +-- @codemirror/language@6.6.0
| | `-- @codemirror/state@6.2.0
| `-- @codemirror/state@6.2.0
+-- @codemirror/state@6.4.1
+-- @uiw/codemirror-theme-xcode@4.19.9
| `-- @uiw/codemirror-themes@4.19.9
|   `-- @codemirror/state@6.2.0
`-- @uiw/react-codemirror@4.22.2
  +-- @codemirror/commands@6.2.1
  | `-- @codemirror/state@6.2.0
  +-- @codemirror/state@6.4.1 deduped✅
  +-- @codemirror/theme-one-dark@6.1.1
  | `-- @codemirror/state@6.2.0
  +-- @codemirror/view@6.9.1
  | `-- @codemirror/state@6.2.0
  +-- @uiw/codemirror-extensions-basic-setup@4.22.2
  | +-- @codemirror/autocomplete@6.4.2
  | | `-- @codemirror/state@6.4.1 deduped✅
  | +-- @codemirror/lint@6.1.1
  | | `-- @codemirror/state@6.2.0
  | +-- @codemirror/search@6.2.3
  | | `-- @codemirror/state@6.2.0
  | `-- @codemirror/state@6.4.1 deduped✅
  `-- codemirror@6.0.1
    +-- @codemirror/autocomplete@6.4.2
    | `-- @codemirror/state@6.2.0 deduped✅
    `-- @codemirror/state@6.2.0

2. 중복 패키지 해결

NPM 사용

npm dedupe 명령어는 의존성 중복을 제거하고, 패키지 트리를 최적화하는 데 사용합니다.

npm dedupe

yarn 사용

package.json 파일의 resolutions 필드는 프로젝트에서 다른 의존성이 요구하는 특정 패키지의 버전을 강제로 설정할 수 있는 기능입니다.

# package.json (프로젝트)
# x.y.z는 원하는 버전 기입
"resolutions": {
  "@codemirror/state": "x.y.z"
}
# shell
yarn install

해결 확인

• 실행하여 오류가 없는지 확인
• 관련 패키지가 단일 버전으로 연결되었는지 확인

npm ls @codemirror/state

추가 해결 방안

위 1, 2번 진행 후에도 에러 발생 시 추가 해결 방안입니다.

공통

• 작성된 파일에서 정상적인 패키지에서 Import 하는지 확인
• 해당 패키지 관련된 패키지들 모두 최신 버전 업데이트(버전 충돌 및 버그 가능성)

NPM

rm -rf node_modules package-lock.json
npm install

yarn

rm -rf node_modules yarn.lock
yarn install