ckeditor craco设置中的iConview发生错误

Question

我正在设置Craco，以在CRA中使用Ckeditor。我一直在IconView中遇到错误。 修改正则不改变任何东西。

该设置文件在其他现有项目中使用时正常工作，但是在新项目中继续发生错误。 我想知道是什么原因导致了这个错误。

craco.config.js

const CKEditorWebpackPlugin = require("@ckeditor/ckeditor5-dev-webpack-plugin");
const { styles } = require("@ckeditor/ckeditor5-dev-utils");

module.exports = {
  webpack: {
    configure: (config, { env, paths }) => {
      config.plugins.push(
        new CKEditorWebpackPlugin({
          language: "ko",
          addMainLanguageTranslationsToAllAssets: true,
        })
      );

      const regExpThemeIconSvg =
        /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/;
      const regExpThemeCss = /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/;
      const cssRegex = /\.css$/;
      const cssModuleRegex = /\.module\.css$/;
      config.module.rules.push(
        { test: regExpThemeIconSvg, use: ["raw-loader"] },
        {
          test: regExpThemeCss,
          use: [
            {
              loader: "style-loader",
              //   options: { injectType: "singletonStyleTag" }
            },
            {
              loader: "postcss-loader",
              options: styles.getPostCssConfig({
                themeImporter: {
                  themePath: require.resolve("@ckeditor/ckeditor5-theme-lark"),
                },
                minify: true,
              }),
            },
          ],
        }
      );

      config.module.rules.forEach((rule) => {
        if (rule.oneOf) {
          rule.oneOf.forEach((subRule) => {
            if (String(subRule.test) === String(cssRegex)) {
              subRule.exclude = [cssModuleRegex, regExpThemeCss];
            }

            if (String(subRule.test) === String(cssModuleRegex)) {
              subRule.exclude = [regExpThemeCss];
            }

            if (
              String(subRule.loader).includes("file-loader") &&
              Array.isArray(subRule.exclude)
            ) {
              subRule.exclude.push(regExpThemeIconSvg, regExpThemeCss);
            }
          });
        }
      });

      return config;
    },
  },
};

错误日志

react_devtools_backend.js:3973 TypeError: Cannot read properties of null (reading 'getAttribute')
    at IconView._updateXMLContent (iconview.js:100:1)
    at IconView.render (iconview.js:76:1)
    at IconView.<anonymous> (observablemixin.js:258:1)
    at IconView.fire (emittermixin.js:200:1)
    at IconView.<computed> [as render] (observablemixin.js:262:1)
    at ViewCollection._renderViewIntoCollectionParent (viewcollection.js:204:1)
    at ViewCollection.<anonymous> (viewcollection.js:65:1)
    at ViewCollection.fire (emittermixin.js:200:1)
    at ViewCollection.addMany (collection.js:220:1)
    at ViewCollection.add (collection.js:185:1) {phase: 'initialization', willEditorRestart: false}

Answer 1

我和你遇到了同样的问题，我花了很长时间才能理解发生了什么。就我而言，也许您的情况与React-Scripts软件包版本有关。最近的反应录版本＆gt; 4.0.3，将丢弃此错误。您可以降级包装，也可以使用我创建的此“插件”：

gist： https://gist.github.com/william-takayama/6b2a7e4b0b9497ee59fa4ba60bba60bed2e6d0

const { styles } = require("@ckeditor/ckeditor5-dev-utils")

const getLoaderByRegex = (loaders, regex) => loaders.find(
  item => !Array.isArray(item.test) && (String(item.test) === String(regex))
)

const cssRegex = /\.css$/
const cssModuleRegex = /\.module\.css$/
const CKEditorRegExp = {
  cssExp: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
  svgExp: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
}

const CKEditor5WebpackConfigPlugin = {
  overrideWebpackConfig: ({ webpackConfig, options = {} }) => {
    // Extract the oneOf array from the relevant webpack.module.rules object
    const { oneOf } = webpackConfig.module.rules.find(rule => rule.oneOf)
  
    // Add the SVG and CSS loaders to the oneOf array in the first position. 
    // As oneOf array uses the first loader that matches the value of test, we need to ensure that
    // SVGs and CSS files from ckeditor5 folder inside node_module, are using the correct loaders 
    // provided on documentation: https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/alternative-setups/integrating-from-source.html#webpack-configuration
    oneOf.unshift(
      {
        // ASSET-MODULES replaces raw-loader - https://webpack.js.org/guides/asset-modules/
        test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
        type: 'asset/source',
      },
      {
        test: CKEditorRegExp.cssExp,
        use: [
          {
            loader: "style-loader",
            options: {
              injectType: "singletonStyleTag"
            }
          },
          'css-loader',
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: styles.getPostCssConfig({
                themeImporter: {
                  themePath: require.resolve("@ckeditor/ckeditor5-theme-lark")
                },
                minify: true
              })
            }
          }
        ]
      }
    )
  
    // Make sure cssRegex doesn't use loader for CKEditor5
    getLoaderByRegex(oneOf, cssRegex).exclude = [cssModuleRegex, CKEditorRegExp.cssExp]
    // Make sure cssModuleRegex doesn't use loader for CKEditor5
    getLoaderByRegex(oneOf, cssModuleRegex).exclude = [CKEditorRegExp.cssExp]
  
    return webpackConfig
  }
}

module.exports = { CKEditor5WebpackConfigPlugin }

// usage -> craco.config.js -> 
/*
module.exports = {
  plugins: [{
    plugin: CKEditor5WebpackConfigPlugin,
  }],
}
*/