React项目集成CKEditor 5图片插件时出现报错问题

问题重现 #

在React项目中使用craco工具集成CKEditor5作为内容编辑器，未安装图片插件时项目运行正常，但安装并使用该插件后，出现如下报错：
./node_modules/@ckeditor/ckeditor5-engine/theme/placeholder.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./node_modules/@ckeditor/ckeditor5-engine/theme/placeholder.css) TypeError: Cannot set properties of undefined (setting 'parent') at Array.forEach (<anonymous>)

解决方案 #

• 修改Craco的Webpack配置，适配CKEditor5的CSS规则
  CKEditor5的主题CSS依赖特定的PostCSS处理逻辑，Craco默认的CSS loader配置会和它冲突。在craco.config.js中添加专门的CKEditor CSS处理规则：

  module.exports = {
    webpack: {
      configure: (webpackConfig) => {
        // 定位到CSS规则集合
        const cssRuleGroup = webpackConfig.module.rules.find(rule => rule.oneOf);
        if (!cssRuleGroup) return webpackConfig;
  
        // 插入CKEditor CSS的处理规则到最前面
        cssRuleGroup.oneOf.unshift({
          test: /ckeditor5-[^/]+\/theme\/[\w-/]+\.css$/,
          use: [
            {
              loader: 'style-loader',
              options: { injectType: 'singletonStyleTag' }
            },
            'css-loader',
            {
              loader: 'postcss-loader',
              options: {
                postcssOptions: {
                  plugins: [
                    require('postcss-import'),
                    require('postcss-url')({ assetsPath: '../' })
                  ]
                }
              }
            }
          ]
        });
  
        return webpackConfig;
      }
    }
  };
  

• 安装必要的依赖包
  执行以下命令安装配置中用到的loader和PostCSS插件：

  npm install style-loader css-loader postcss-loader postcss-import postcss-url --save-dev
  

• 统一CKEditor5相关包的版本
  版本不一致会引发各种兼容性问题，确保package.json里所有CKEditor5相关包的版本号一致，示例：

  {
    "@ckeditor/ckeditor5-react": "^6.0.0",
    "@ckeditor/ckeditor5-editor-classic": "^39.0.2",
    "@ckeditor/ckeditor5-image": "^39.0.2",
    "@ckeditor/ckeditor5-essentials": "^39.0.2"
  }
  

• 清理缓存并重新构建
  清理依赖缓存和Webpack缓存，避免旧配置干扰：

  rm -rf node_modules package-lock.json
  npm install
  npm start -- --reset-cache
  

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