Error: Unrecognized extension value in extension set


I am playing around with the Underline example in Decorations CodeMirror Decoration Example by modifing the function underlineSelection(view) function to underline a given word and not using the undelineKeymap const. to underline selected text. When I add the modified function to the exensions: list it gives the Error: “Unrecognized extension value in extension set” because of multiple instances of @codemirror/state are loaded.

What are some ways to get around the error?

The code I am playing with to basically get a particular word to be underlined.

    <h1>Codemirror 6 Example</h1>
    <div id="cm-editor">

<script setup>
import {EditorState, basicSetup} from "@codemirror/basic-setup"
import {python} from "@codemirror/lang-python"
import {EditorView, Decoration, ViewPlugin} from "@codemirror/view"
import {gutter, GutterMarker} from "@codemirror/gutter"
import {StateField, StateEffect} from "@codemirror/state"

const emptyMarker = new class extends GutterMarker {
  toDOM() { return document.createTextNode("ø") }
const emptyLineGutter = gutter({

  lineMarker(view, line) {
    const allText = view.state.doc.text.join('\n')
    const lineText = allText.slice(line.from,;
    console.log("lineText", lineText)
    return lineText.includes('is') ? emptyMarker : null
  initialSpacer: () => emptyMarker


const addUnderline = StateEffect.define();

const underlineField = StateField.define({
  create() {
    return Decoration.none
  update(underlines, tr) { 
    underlines =
    for (let e of tr.effects)
      if ( {
      underlines = underlines.update({
        add: [underlineMark.range(e.value.from,]
    return underlines
  provide: (f) => {

const underlineMark = Decoration.mark({class: "cm-underline"})

const underlineTheme = EditorView.baseTheme({
  ".cm-underline": {  fontSize: "16pt", fontWeight:"bold" , textDecoration: "underline 3px blue" }

function underlineSelection(view) {

   const allText = view.state.doc.text.join('\n')
   const idx = allText.indexOf("is")
   let effects = [addUnderline.of({from: idx, to: idx+2})]

   if (!effects.length) return false

   if (!view.state.field(underlineField, false))
   return true

 new EditorView({
  state: EditorState.create({
    doc: `x = 10
if x == 12:
  print("It is 12")
this is not python
print("The end")`,
    extensions: [basicSetup, python(), emptyLineGutter ,underlineSelection  ]
  parent: document.body

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
ul {
  list-style-type: none;
  padding: 0;
li {
  display: inline-block;
  margin: 0 10px;
a {
  color: #42b983;

You’re passing underlineSelection, which is a function, in your extensions array. That’s definitely a type error, since it’s not an extension, and I’m not entirely sure what it is you were trying to do with that function.

Well what I am trying underline designated keys words in the editor. I saw that the underline example did underline of selected word and thought I could modify that to do my underline but as you pointed out I need to use an extension. Now would I need to convert the function into a extension and if so how would do that. Else, is there another way I should pursuing to get to my goal.
Thanks for any constructive input.

Depends on what kind of extension you’re trying to define. Maybe read the underline example again and see how it does things.