React+MidwayJS+Webpack+TS项目报s.default is undefined错误如何解决？

架构老林

2026-9-24

问题排查点

webpack externals配置错误
当前配置externals: { React: 'React' }存在两处问题：
1. 外部依赖的键名需要和导入语句的模块名完全匹配，代码中是import React from 'react'，所以键名应为小写的react
2. 配置react为外部依赖后，需要在html模板中手动引入React的CDN脚本，确保全局变量React存在，否则导入时拿到的就是undefined，访问.default就会抛出对应错误。如果不需要将react外置，直接删除externals配置即可。

tsx文件loader执行顺序错误
webpack loader的执行顺序为从数组末尾到头部执行，当前配置是先执行babel-loader再执行ts-loader，不符合编译逻辑，需要调整顺序为：

use: [
  {
    loader: 'babel-loader?cacheDirectory=true',
    options: {
      presets: [
        '@babel/preset-env',
        '@babel/preset-react',
      ],
      plugins: [
        '@babel/plugin-transform-runtime',
        [
          'transform-react-remove-prop-types',
          {
            mode: 'wrap',
            ignoreFilenames: ['node_modules'],
          },
        ],
      ],
    },
  },
  {
    loader: 'awesome-typescript-loader',
    options: {
      transpileOnly: true,
    },
  }
]

确保先将TS/TSX编译为JS，再交给Babel做兼容性处理。

tsconfig模块化配置冲突
你的tsconfig中module设置为CommonJS，同时开启了allowSyntheticDefaultImports，如果webpack按照ES模块规范处理导入，会出现CommonJS导出和ES导入的匹配问题，建议将module改为ESNext，交由webpack处理模块化打包。
外部依赖遗漏
如果你确实需要外置react，还需要同步外置react-dom，否则react-dom内部依赖的react无法正常获取，补充externals配置为：
```
externals: {
  'react': 'React',
  'react-dom': 'ReactDOM'
}
```
同时在html模板中补充ReactDOM的CDN引入。
Babel预设配置补充
建议给@babel/preset-react指定runtime配置，避免和TS的jsx编译规则冲突：
```
['@babel/preset-react', { runtime: 'classic' }]
```