使用CodeMirror时已配置package.json却出现模块找不到错误

情况1：安装了CodeMirror 6版本 #

CodeMirror 6完全重构了包结构，旧的codemirror/lib/xxx这类导入路径已不再适用，它拆分为多个独立功能包：

• 核心编辑器依赖：@codemirror/view、@codemirror/state
• 主题包：比如@codemirror/theme-material
• 语言模式包：比如@codemirror/lang-xml、@codemirror/lang-javascript、@codemirror/lang-css

对应替换导入代码：

// 导入核心编辑器基础配置与视图
import { EditorView, basicSetup } from "codemirror";
// 导入Material主题
import { materialDark } from "@codemirror/theme-material";
// 导入各语言模式
import { xml } from "@codemirror/lang-xml";
import { javascript } from "@codemirror/lang-javascript";
import { css } from "@codemirror/lang-css";

初始化编辑器时需将这些扩展传入配置：

const view = new EditorView({
  extensions: [
    basicSetup,
    materialDark,
    xml(),
    javascript(),
    css()
  ],
  parent: document.getElementById("editor")
});

情况2：坚持使用CodeMirror 5版本 #

如果要继续用CodeMirror 5，先确认安装的是正确版本：

npm install codemirror@5

若已安装5版本仍报错，可能是包的exports字段限制了导入路径，可尝试修改导入路径为node_modules内的绝对路径（应急方案）：

import "../node_modules/codemirror/lib/codemirror.css";
import "../node_modules/codemirror/theme/material.css";
import "../node_modules/codemirror/mode/xml/xml.js";
import "../node_modules/codemirror/mode/javascript/javascript.js";
import "../node_modules/codemirror/mode/css/css.js";

也可在Webpack、Vite等构建工具中配置别名，指向codemirror的实际目录，解决路径解析问题。

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