Webpack4项目替换Babel为ts-loader/swc-loader后类型导入报错求助

我们有一个基于 Webpack 4 + Babel 7.x + TypeScript 3.8 的项目，随着规模扩大需要提升构建速度，尝试将 Babel 替换为 ts-loader 或 swc-loader 后出现报错：所有形如import { SomeType } from 'FILE|MODULE'的混合导入（同时导入类型和值）都会触发模块找不到的错误，示例报错如下：

import React, { FC, useState, useEffect } from 'react'
// 所有`import { SomeType } from 'FILE|MODULE'`语法都会报错

ERROR in ./src/pages/merchandise/manage/merchandise_list/create/type.ts
Module not found: Error: Can't resolve 'react-hot-loader/node_modules/@types/react' in '/Users/jawei/Desktop/gm_projects/erp/src/pages/merchandise/manage/merchandise_list/create'
@ ./src/pages/merchandise/manage/merchandise_list/create/type.ts 7:0-53
@ ./src/pages/merchandise/manage/components/upload_images/index.tsx
@ ./src/pages/system/shop_decoration/student_meal/shop_background/index.tsx
@ ./src/pages/system/shop_decoration/student_meal/index.page.tsx
@ ./src/pages lazy index\.page\.
@ ./src/frame/index.tsx
@ ./src/index.tsx
@ multi react-hot-loader/patch ./src/index

将代码改为分离类型导入的形式即可正常运行：

import React, { useState, useEffect } from 'react'
import type { FC } from 'react'

但项目代码量过大，不想逐个文件修改，以下是让 ts-loader 兼容原有混合导入语法的方案：

解决方案 #

1. 调整 TypeScript 配置（tsconfig.json） #

核心是让 TypeScript 自动识别混合导入中的类型并正确剥离，而非当作值导入处理：

• 关闭isolatedModules选项：该选项强制要求类型必须通过import type导入（为兼容 Babel 单文件编译模式设计），替换为 ts-loader 后可以关闭：

{
  "compilerOptions": {
    "isolatedModules": false,
    // 保留其他原有配置
  }
}

• 开启skipLibCheck选项：跳过第三方库的类型检查，避免嵌套依赖的类型文件路径冲突：

{
  "compilerOptions": {
    "skipLibCheck": true,
    // 保留其他原有配置
  }
}

• 确保moduleResolution设置为node：保证模块解析遵循 Node.js 规则，避免路径解析错误：

{
  "compilerOptions": {
    "moduleResolution": "node",
    // 保留其他原有配置
  }
}

2. 修复 react-hot-loader 依赖冲突 #

报错中出现react-hot-loader/node_modules/@types/react，说明 react-hot-loader 嵌套安装了重复的@types/react，导致路径解析混乱：

• 清理并重新安装依赖：

rm -rf node_modules package-lock.json
npm install

• 替换为 react-refresh（推荐）：react-hot-loader 已停止维护，官方推荐使用 react-refresh，同时能提升热加载稳定性：
  1. 安装依赖：

  npm install @pmmmwh/react-refresh-webpack-plugin react-refresh react-refresh-typescript --save-dev
  

  2. 修改 Webpack 配置：

  const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
  const ReactRefreshTypeScript = require('react-refresh-typescript');
  
  module.exports = {
    // ...原有配置
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: [
            {
              loader: 'ts-loader',
              options: {
                getCustomTransformers: () => ({
                  before: [ReactRefreshTypeScript()]
                }),
                transpileOnly: true // 开启后只编译不做类型检查，进一步提升构建速度
              }
            }
          ],
          exclude: /node_modules/
        }
      ]
    },
    plugins: [
      new ReactRefreshWebpackPlugin(),
      // ...原有插件
    ],
    devServer: {
      hot: true,
      // ...原有 devServer 配置
    }
  }
  

3. 优化 ts-loader 配置（可选） #

如果需要保留类型检查同时提升速度，可以开启transpileOnly并配合fork-ts-checker-webpack-plugin，将类型检查放到单独进程：

npm install fork-ts-checker-webpack-plugin --save-dev

修改 Webpack 配置：

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = {
  // ...原有配置
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: 'ts-loader',
            options: {
              transpileOnly: true
            }
          }
        ],
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new ForkTsCheckerWebpackPlugin(),
    // ...原有插件
  ]
}

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