从零配置Webpack构建React应用时遭遇UnhandledSchemeError错误的求助

这个问题我配置Webpack 5的时候也踩过坑，核心原因是Webpack 5对模块URI scheme的处理逻辑变严格了，咱们一步步拆解原因和解决方案：

错误成因 #

• Webpack 5开始严格校验模块的URI scheme，默认只支持data:和file:两种格式。你代码里写的containers:/App、shared:/states/store这种带冒号加斜杠的写法，被Webpack误判成了自定义URI scheme（类似http:、https:），但Webpack没有对应的插件处理这种scheme，所以直接抛出了UnhandledSchemeError。
• 你的tsconfig paths和Webpack alias配置用了shared:/*、containers:/*这种带冒号的前缀，再加上import语句里的containers:/App写法，正好触发了Webpack的scheme检测逻辑，导致别名解析完全失效，反而被当成URI处理。

解决步骤 #

1. 改用常规别名格式（推荐方案） #

最稳妥的方式是把带冒号的别名改成行业通用的格式，比如用@前缀，避免和Webpack的scheme逻辑冲突：

修正tsconfig.json的paths配置

"compilerOptions": {
  // 其他配置...
  "paths": {
    "@shared/*": ["shared/*"],
    "@containers/*": ["client/app/views/containers/*"]
  }
}

修正webpack.config.js的resolve.alias配置

const path = require('path');

module.exports = {
  // 其他配置...
  resolve: {
    modules: paths.clientAppModules,
    extensions: ['.tsx', '.ts', '.js'],
    alias: {
      '@shared': path.resolve(__dirname, '../shared'),
      '@containers': path.resolve(__dirname, '../client/app/views/containers')
    }
  },
  // 其他配置...
};

这里用path.resolve生成绝对路径，比硬编码本地路径更灵活，项目换环境也不用改配置。

2. 同步修正代码中的import语句 #

把index.tsx里的import改成和新别名匹配的写法，还要注意目录名的笔误（你项目里是shared/state/，代码里写的是states）：

// 原写法
import { store } from 'shared:/states/store';
import App from 'containers:/App';

// 修改后
import { store } from '@shared/state/store';
import App from '@containers/App';

3. （可选）保留冒号前缀的兼容方案 #

如果你坚持要用带冒号的别名，需要调整写法避免触发Webpack的scheme检测：

• tsconfig paths改成"containers:*": ["client/app/views/containers/*"]（去掉冒号后的斜杠）
• Webpack alias保持'containers:': path.resolve(__dirname, '../client/app/views/containers')
• import语句改成import App from 'containers:App';（去掉冒号后的斜杠）
  同时在Webpack配置里添加resolve.fullySpecified: false，关闭模块路径的严格校验：

resolve: {
  // 其他配置...
  fullySpecified: false
}

不过这种写法还是容易踩坑，更推荐用@前缀的常规别名。

验证修复 #

修改完所有配置和代码后，重新执行构建命令：

webpack -c config/webpack.config.ts

应该就能正常解析模块，顺利完成构建了。

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