CodeMirror提示「扩展集中存在无法识别的扩展值」问题求助

核心问题分析 #

你遇到的错误提示「Unrecognized extension value in extension set ([object Object])」通常由两个原因导致：

1. React组件渲染时机错误，DOM元素未挂载时就尝试初始化EditorView
2. 项目中存在多个版本的@codemirror/state包，破坏了实例检查逻辑

分步修复方案 #

1. 修正React组件的初始化逻辑 #

你的代码直接在组件函数体内创建EditorView，此时目标元素还未挂载到DOM中，document.querySelector('#realtimeeditor')会返回null，同时组件每次渲染都会重复创建EditorView实例，引发异常。需要改用useEffect确保DOM挂载后初始化，并用useRef保存实例：

import React, { useEffect, useRef } from 'react'
import { EditorState } from '@codemirror/state'
import { lineNumbers, EditorView, keymap, highlightActiveLine } from '@codemirror/view'
import { defaultKeymap } from '@codemirror/commands'
import { history, historyKeymap } from '@codemirror/history'
import { indentOnInput, foldGutter, foldKeymap, syntaxHighlighting } from '@codemirror/language'
import { bracketMatching } from '@codemirror/matchbrackets'
import { highlightActiveLineGutter } from '@codemirror/gutter'
import { defaultHighlightStyle } from '@codemirror/highlight'
import { javascript } from '@codemirror/lang-javascript'
import { highlightSelectionMatches, searchKeymap } from '@codemirror/search'
import { autocompletion, closeBrackets, closeBracketsKeymap, completionKeymap } from '@codemirror/autocomplete'
import { lintKeymap } from '@codemirror/lint'
import { crosshairCursor, drawSelection, dropCursor, highlightSpecialChars, rectangularSelection } from '@codemirror/view'

const Editor = () => {
    const initialText = 'console.log("hello, world")'
    const editorContainerRef = useRef(null)
    const editorViewRef = useRef(null)

    useEffect(() => {
        if (!editorContainerRef.current || editorViewRef.current) return

        // 初始化EditorView
        editorViewRef.current = new EditorView({
            parent: editorContainerRef.current,
            state: EditorState.create({
                doc: initialText,
                extensions: [
                    lineNumbers(),
                    highlightActiveLineGutter(),
                    highlightSpecialChars(),
                    history(),
                    foldGutter(),
                    drawSelection(),
                    dropCursor(),
                    EditorState.allowMultipleSelections.of(true),
                    indentOnInput(),
                    syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
                    bracketMatching(),
                    closeBrackets(),
                    autocompletion(),
                    rectangularSelection(),
                    crosshairCursor(),
                    highlightActiveLine(),
                    highlightSelectionMatches(),
                    keymap.of([
                        ...closeBracketsKeymap,
                        ...defaultKeymap,
                        ...searchKeymap,
                        ...historyKeymap,
                        ...foldKeymap,
                        ...completionKeymap,
                        ...lintKeymap,
                    ]),
                    javascript(),
                ],
            }),
        })

        // 组件卸载时销毁EditorView
        return () => {
            if (editorViewRef.current) {
                editorViewRef.current.destroy()
                editorViewRef.current = null
            }
        }
    }, [])

    // 用div替代textarea作为容器，EditorView会接管该元素内容
    return <div ref={editorContainerRef} id='realtimeeditor'></div>
}

export default Editor

2. 解决多版本@codemirror/state问题 #

即使升级了依赖，也可能因为lock文件缓存导致多个版本共存，执行以下步骤彻底清理：

• 删除项目根目录下的node_modules文件夹
• 删除package-lock.json（或yarn.lock/pnpm-lock.yaml）
• 重新执行npm install（或对应包管理命令）
• 安装完成后，执行npm ls @codemirror/state检查是否只有一个版本存在

3. 可选：简化扩展配置 #

你引入的basicSetup包含了大部分你手动添加的扩展，可以直接使用它来简化代码：

// 导入basicSetup
import { basicSetup } from 'codemirror'

// 在extensions中替换手动配置
extensions: [
    basicSetup,
    javascript(),
    // 额外需要的扩展可以加在这里
]

内容的提问来源于stack exchange，提问作者Aman Singh