MERN栈CKEditor5图片上传报错：无法解析_dir.css文件求助

核心原因 #

你使用的是CKEditor5预构建包（@ckeditor/ckeditor5-build-classic），这类预构建包已经打包了完整的UI样式和核心逻辑，单独安装@ckeditor/ckeditor5-upload插件时，会和预构建包内部的UI组件依赖产生路径冲突——CRA的Webpack无法解析插件中引用的预构建包内部样式路径，导致编译报错。

方法1：改用自定义编辑器构建（推荐，彻底解决冲突） #

预构建包不适合扩展插件，官方推荐自定义构建来匹配所需功能，步骤如下：

1. 卸载预构建包

npm uninstall @ckeditor/ckeditor5-build-classic

2. 安装核心编辑器和必要插件（按需添加你需要的其他功能插件）

npm install @ckeditor/ckeditor5-editor-classic @ckeditor/ckeditor5-essentials @ckeditor/ckeditor5-paragraph @ckeditor/ckeditor5-basic-styles @ckeditor/ckeditor5-upload

3. 创建自定义编辑器文件（比如src/components/CustomCKEditor.js）

import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import SimpleUploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter';

export default class CustomEditor extends ClassicEditorBase {}

// 配置插件和工具栏
CustomEditor.builtinPlugins = [
  Essentials,
  Paragraph,
  Bold,
  Italic,
  SimpleUploadAdapter
];

CustomEditor.defaultConfig = {
  toolbar: {
    items: [
      'bold', 'italic', '|', 'uploadImage', '|', 'undo', 'redo'
    ]
  },
  // 配置SimpleUploadAdapter指向你的Cloudinary上传接口
  simpleUpload: {
    uploadUrl: '你的Cloudinary上传API地址'
  },
  language: 'zh-cn'
};

4. 在React组件中使用自定义编辑器

import { CKEditor } from '@ckeditor/ckeditor5-react';
import CustomEditor from './CustomCKEditor';

function App() {
  return (
    <div className="App">
      <CKEditor
        editor={CustomEditor}
        data="<p>Hello from custom CKEditor!</p>"
        onReady={editor => {
          console.log('Editor is ready to use!', editor);
        }}
      />
    </div>
  );
}

export default App;

方法2：临时修复（不推荐，仅适用于不想重构的场景） #

如果不想切换自定义构建，可以通过react-app-rewired修改CRA的Webpack配置，解决样式路径解析问题：

1. 安装依赖

npm install react-app-rewired --save-dev

2. 在项目根目录创建config-overrides.js

module.exports = function override(config, env) {
  // 添加CKEditor样式路径的别名解析
  config.resolve.alias = {
    ...config.resolve.alias,
    '@ckeditor/ckeditor5-ui/theme/mixins/_dir.css': require.resolve('@ckeditor/ckeditor5-ui/theme/mixins/_dir.css')
  };
  // 确保CKEditor的CSS文件被正确处理
  config.module.rules.forEach(rule => {
    if (rule.oneOf) {
      rule.oneOf.unshift({
        test: /ckeditor5-[^/]+\/theme\/[^/]+\.css$/,
        use: [
          {
            loader: 'style-loader',
            options: {
              injectType: 'singletonStyleTag'
            }
          },
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  require('postcss-import'),
                  require('postcss-nesting'),
                  require('postcss-custom-properties')
                ]
              }
            }
          }
        ]
      });
    }
  });
  return config;
};

3. 修改package.json中的启动脚本

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

4. 重新启动项目

npm start

额外检查 #

• 确保所有CKEditor相关包的版本完全一致，执行npm ls @ckeditor/ckeditor5-ui查看版本，若有不一致的，可手动指定版本或执行npm dedupe整理依赖树。
• 验证你的Cloudinary上传接口是否能正常接收并返回图片URL（可以用Postman单独测试）。

内容的提问来源于stack exchange，提问作者God's Drunkest Driver