React项目集成CKEditor5添加GitHub第三方插件时遭遇SVG编译错误

嘿，我之前帮人排查过几乎一模一样的问题，这个错误的根源其实很清晰：CKEditor5核心包里面的object-size-custom.svg文件带了自定义XML命名空间（就是那行xmlns:v="https://vecta.io/nano"），而React的JSX默认不支持这种命名空间标签，负责编译SVG的@svgr/webpack loader就直接报错了。之前用官方插件没触发这个问题，大概率是因为那些插件没用到这个特定的SVG文件，而你加的第三方插件刚好调用到了它。

给你两个靠谱的解决办法，按需选择：

方法一：修改Webpack配置，让svgr忽略命名空间报错 #

这个是最通用的方案，分两种场景：

如果你用的是自定义Webpack配置 #

找到配置文件里处理SVG的规则，给@svgr/webpack添加throwIfNamespace: false的选项就行：

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/i,
        issuer: /\.[jt]sx?$/,
        use: [
          {
            loader: '@svgr/webpack',
            options: {
              throwIfNamespace: false, // 关键：关闭命名空间检查
            },
          },
        ],
      },
    ],
  },
};

如果你用的是Create React App（未执行eject） #

直接改CRA的默认配置需要借助react-app-rewired：

1. 先安装依赖：

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

2. 在项目根目录新建config-overrides.js文件，写入：

module.exports = function override(config, env) {
  // 找到处理SVG的规则
  const svgRule = config.module.rules.find(rule => rule.test.test('.svg'));
  if (svgRule) {
    // 定位到svgr loader并修改选项
    const svgrLoader = svgRule.use.find(use => use.loader === '@svgr/webpack');
    if (svgrLoader) {
      svgrLoader.options = {
        ...svgrLoader.options,
        throwIfNamespace: false,
      };
    }
  }
  return config;
};

3. 最后修改package.json里的启动脚本，把react-scripts替换成react-app-rewired：

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

方法二：持久化修改有问题的SVG文件 #

如果不想改Webpack配置，也可以直接处理那个出问题的SVG文件，再用工具保证修改不会被npm install覆盖：

1. 找到node_modules/@ckeditor/ckeditor5-core/theme/icons/object-size-custom.svg，删掉里面的xmlns:v="https://vecta.io/nano"这一行；
2. 安装patch-package来生成持久化补丁：

npm install patch-package --save-dev

3. 运行命令生成补丁：

npx patch-package @ckeditor/ckeditor5-core

之后每次执行npm install，这个补丁都会自动应用到CKEditor5的核心包上，不用重复修改。

备注：内容来源于stack exchange，提问作者Ecem Selin Demir