React项目使用CodeMirror basicSetup报错：无法解析@codemirror/basic-setup

1. 确认依赖安装状态 #

• 打开项目根目录的package.json，检查@codemirror/basic-setup是否在dependencies列表中。若缺失，重新执行安装命令：

  npm install @codemirror/basic-setup --save
  

• 若package.json已包含该依赖但报错，删除缓存文件后重装所有依赖：

  rm -rf node_modules package-lock.json
  npm install
  

2. 修正导入路径错误 #

你的代码中存在错误导入：EditorState并非来自@codemirror/basic-setup，而是属于@codemirror/state包，这会干扰模块解析逻辑。修正后的导入代码如下：

import React, { useRef, useEffect } from 'react'

import basicSetup from '@codemirror/basic-setup'
import { EditorState } from '@codemirror/state' // 修正此处导入路径
import { EditorView, keymap } from '@codemirror/view'
import { defaultKeymap, indentWithTab } from '@codemirror/commands'

3. 重启开发服务器并检查构建配置 #

• 若使用Create React App，重启开发服务器清除缓存：

  npm start
  

• 自定义Webpack配置时，确保resolve规则未限制node_modules解析，无别名冲突：

  // webpack.config.js 示例配置
  module.exports = {
    resolve: {
      modules: ['node_modules'],
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
    },
  }
  

4. 统一CodeMirror包版本 #

CodeMirror 6的各子包版本需保持一致，避免版本不匹配导致的解析异常。查看package.json中所有@codemirror/*前缀的依赖，确保版本号相同，若不一致可统一升级：

npm update @codemirror/basic-setup @codemirror/commands @codemirror/state @codemirror/view

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