React引入semantic-ui-css报UnhandledSchemeError构建错误

云原生阿岚

2026-9-2

问题根因

该报错由两类原因触发：一是react-scripts 5.0.0版本内置webpack 5的资源解析规则存在已知bug，无法正确识别data:协议URI的资源；二是semantic-ui-css包内置base64内联ttf字体资源的写法，刚好命中这个解析bug。问题和依赖安装损坏无关，重装node_modules无法解决。两个报错属于同一触发链：webpack无法解析css中内嵌的data:application/x-font-ttf格式资源，后续解析流程拿不到对应资源对象，才会抛出Cannot read properties of undefined (reading 'get')的二级错误。

解决方案

按操作成本从低到高排序，任选其一即可：

升级react-scripts版本
执行npm install react-scripts@latest将react-scripts升级到最新稳定版，重新执行npm start启动项目即可。5.0.1之后的版本已经修复了data协议资源的解析bug，覆盖绝大多数同场景报错。
调整样式引入方式
若升级后问题仍存在，移除index.js中的import 'semantic-ui-css/semantic.min.css'引入语句，将semantic的样式文件复制到public目录下，在public/index.html的<head>标签内直接引入本地样式文件：
```
<link rel="stylesheet" href="/semantic.min.css">
```
这种引入方式会跳过webpack的css解析流程，不会触发资源解析报错。
补全webpack资源解析规则
需要保留js入口引入样式写法的场景，无需eject弹出配置，通过craco覆盖webpack配置即可：
1. 执行npm install @craco/craco -D安装配置覆盖工具
2. 在项目根目录新建craco.config.js文件，写入如下配置补充字体类资源的解析规则：
```
module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      webpackConfig.module.rules.push({
        test: /\.(ttf|eot|woff|woff2|svg)$/,
        type: 'asset/inline'
      })
      return webpackConfig
    }
  }
}
```
1. 修改package.json中的scripts字段，将原有react-scripts命令替换为craco：
```
"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}
```
执行npm start重启项目即可正常编译。
安装适配补丁
不想手动调整配置的场景，可直接安装semantic-ui-react官方提供的webpack5适配补丁：
1. 执行npm uninstall semantic-ui-css移除原存在兼容问题的包
2. 执行npm install @semantic-ui-react/css-patch -D安装补丁包
3. 按照补丁初始化说明执行注入命令后，正常在入口文件引入样式即可。

注意：不要单独升级或降级webpack版本，容易引发create-react-app内置依赖的版本连锁冲突。

内容的提问来源于stack exchange，提问作者Pabasara Rathnayake