在Vite+React项目中安装CodeMirror失败如何解决？

1. 补装核心依赖 #

你只安装了react-codemirror2，但它是codemirror的封装组件，必须同时安装核心的codemirror包才能正常运行。执行以下命令：

npm install codemirror react-codemirror2 --legacy-peer-deps

如果用pnpm或yarn，对应替换为pnpm add或yarn add，保留--legacy-peer-deps参数处理依赖版本冲突。

2. 修复导入路径 #

Vite对模块导入的解析要求更严格，你当前的模式文件导入缺少扩展名，导致找不到文件。修改你的导入代码：
原错误写法：

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

修改为：

import "codemirror/lib/codemirror.css";
import "codemirror/theme/material.css";
import "codemirror/mode/xml/xml.js"; // 补充.js扩展名

3. 验证组件基础用法 #

确保你的Editor组件写法规范，示例如下：

import React, { useState } from 'react';
import { Controlled as CodeMirror } from 'react-codemirror2';

// 导入修复后的样式和语法模式
import "codemirror/lib/codemirror.css";
import "codemirror/theme/material.css";
import "codemirror/mode/xml/xml.js";

function Editor() {
  const [codeContent, setCodeContent] = useState('<div>Hello CodeMirror</div>');

  return (
    <CodeMirror
      value={codeContent}
      options={{
        mode: 'xml',
        theme: 'material',
        lineNumbers: true,
        lineWrapping: true
      }}
      onBeforeChange={(editor, data, value) => {
        setCodeContent(value);
      }}
      onChange={(editor, data, value) => {}}
    />
  );
}

export default Editor;

4. 额外排查方案 #

• 检查node_modules/codemirror目录是否存在，确认codemirror包安装成功
• 若使用Vite 4及以上版本，可在vite.config.js中添加优化配置（可选）：

export default {
  optimizeDeps: {
    include: ['codemirror', 'react-codemirror2']
  }
}

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