# Unrecognized extension value in extension set (\[object Object\])
**URL:** https://discuss.codemirror.net/t/unrecognized-extension-value-in-extension-set-object-object/6809
**Category:** v6
**Created:** [July 10, 2023, 9:21pm UTC](https://discuss.codemirror.net/t/unrecognized-extension-value-in-extension-set-object-object/6809 "2023-07-10T21:21:29Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@cole](https://discuss.codemirror.net/u/cole)
#### Post date: [July 10, 2023, 9:21pm UTC](https://discuss.codemirror.net/t/unrecognized-extension-value-in-extension-set-object-object/6809/1 "2023-07-10T21:21:29Z")
Hi All,
I am just getting started with CodeMirror 6 and am just trying to create a basic example. However, I keep running into this 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 already tried removing package-lock and reinstalling node\_modules, but this did not work. I have also ensured that all of my codemirror state versions are the same:
```auto
├─┬ @codemirror/autocomplete@6.8.1
│ └── @codemirror/state@6.2.1 deduped
├─┬ @codemirror/commands@6.2.4
│ └── @codemirror/state@6.2.1 deduped
├─┬ @codemirror/lang-html@6.4.5
│ ├─┬ @codemirror/lang-css@6.2.0
│ │ └── @codemirror/state@6.2.1 deduped
│ └── @codemirror/state@6.2.1 deduped
├─┬ @codemirror/lang-javascript@6.1.9
│ ├─┬ @codemirror/lint@6.4.0
│ │ └── @codemirror/state@6.2.1 deduped
│ └── @codemirror/state@6.2.1 deduped
├─┬ @codemirror/language@6.8.0
│ └── @codemirror/state@6.2.1 deduped
├─┬ @codemirror/search@6.5.0
│ └── @codemirror/state@6.2.1 deduped
├── @codemirror/state@6.2.1
├─┬ @codemirror/view@6.14.1
│ └── @codemirror/state@6.2.1 deduped
└─┬ codemirror@6.0.1
└── @codemirror/state@6.2.1 deduped
```
Here’s my simple example:
```auto
import React, {useRef, useEffect} from 'react';
import {EditorView} from "codemirror"
import {EditorState} from "@codemirror/state"
import {tags} from "@lezer/highlight"
import {lineNumbers} from "@codemirror/view"
import {HighlightStyle} from "@codemirror/language"
let myHighlightStyle = HighlightStyle.define([
{ tag: tags.keyword, color: "#569cd6" },
{ tag: tags.comment, color: "#6a9955" },
]);
function TestComponent({ code, editorRef }) {
const editorDiv = useRef(null);
useEffect(() => {
if (editorDiv.current) {
const view = new EditorView({
state: EditorState.create({
doc: code,
extensions: [
lineNumbers(),
myHighlightStyle,
],
}),
parent: editorDiv.current,
});
editorRef.current = view;
return () => {
// Cleanup editor on unmount
view.destroy();
};
}
}, [code, language]);
return ;
}
```
Does anyone know what causes this error or how to fix it? I looked at other posts about this error, but none of them seemed to fix the issue.
---
### Author:  [@marijn](https://discuss.codemirror.net/u/marijn)
#### Post date: [July 10, 2023, 10:08pm UTC](https://discuss.codemirror.net/t/unrecognized-extension-value-in-extension-set-object-object/6809/2 "2023-07-10T22:08:21Z")
`myHighlightStyle` is not an extension. Try `syntaxHighlighting(myHighlightStyle)`.
---
### Author:  [@Thunderchild](https://discuss.codemirror.net/u/Thunderchild)
#### Post date: [July 11, 2023, 9:29am UTC](https://discuss.codemirror.net/t/unrecognized-extension-value-in-extension-set-object-object/6809/3 "2023-07-11T09:29:27Z")
I’m having the exact same problem, except that I’m attempting to utilize a custom line numbers extension (I’m trying to attach a click handler).
Even without the myHighlightStyle the invalid extension error occurs.
```auto
let view = new EditorView({
state: EditorState.create({
doc: code,
extensions: [
lineNumbers(),
],
}),
parent: parentElement
});
```
I’ve also tried passing the line numbers example
```auto
const hexLineNumbers = lineNumbers({
formatNumber: n => n.toString(16)
});
let view = new EditorView({
state: EditorState.create({
doc: code,
extensions: [
hexLineNumbers,
],
}),
parent: parentElement
});
```
The issue seems to occur whenever ‘LineNumbers’ is used. I appreciate that chances are, there’s something basic that I’m missing.
---
### Author:  [@Thunderchild](https://discuss.codemirror.net/u/Thunderchild)
#### Post date: [July 11, 2023, 9:39am UTC](https://discuss.codemirror.net/t/unrecognized-extension-value-in-extension-set-object-object/6809/4 "2023-07-11T09:39:16Z")
Update: I’ve solved my issue. It turns out I was getting ‘LineNumbers’ from @codemirror/gutter. This lives now in @codemirror/view.
```auto
import {EditorView, Decoration, keymap, lineNumbers} from '@codemirror/view';
//import {lineNumbers} from '@codemirror/gutter';
```
^^ This fixes the linenumbers issue for my case.
---
### Author:  [@marijn](https://discuss.codemirror.net/u/marijn)
#### Post date: [July 11, 2023, 9:47am UTC](https://discuss.codemirror.net/t/unrecognized-extension-value-in-extension-set-object-object/6809/5 "2023-07-11T09:47:08Z")
> [@Thunderchild](#):
>
> ```auto
> extensions: [
> lineNumbers(),
> ],
>
> ```
You probably do have duplicated packages in your dependency tree. Usually easiest to remove it (and the package lock) and reinstall.