在npm Workspace中导入TypeScript模块时出现语法错误怎么办？

你遇到的错误本质是create-react-app（CRA）默认的Webpack配置限制：CRA的Webpack只自动处理当前包（ui）内部的TypeScript文件，对于通过npm Workspaces软链接进来的外部utils包中的TS代码，不会自动调用ts-loader或Babel进行转译。Webpack遇到未转译的TS语法（比如类型注解）时，就会报Module parse failed: Unexpected token错误。

这不是npm的要求——npm本身允许导入TS文件，但前端构建工具（Webpack）需要能解析这些文件才行。

要在开发时直接导入TS工具包，核心是修改CRA的Webpack配置，让它把utils包的TS文件纳入转译范围。由于CRA默认不允许直接修改Webpack配置，我们可以用craco或react-app-rewired来覆盖配置，以下是具体步骤：

方法1：用craco修改Webpack配置 #

1. 在ui包中安装craco：

   npm install @craco/craco --save-dev
   

2. 修改ui包的package.json中的scripts，替换react-scripts为craco：

   "scripts": {
     "start": "craco start",
     "build": "craco build",
     "test": "craco test"
   }
   

3. 在ui包根目录创建craco.config.js，添加如下配置，让Webpack处理utils包的TS文件：

   const path = require('path');
   
   module.exports = {
     webpack: {
       configure: (webpackConfig) => {
         // 找到CRA中处理TS/TSX的规则
         const tsRule = webpackConfig.module.rules.find(rule => 
           rule.test && rule.test.test('.tsx')
         );
         // 将utils包的源文件路径加入转译范围
         tsRule.include.push(path.resolve(__dirname, '../packages/common/utils'));
         return webpackConfig;
       }
     }
   };
   

方法2：配置TS路径别名（配合craco） #

为了让TypeScript能正确识别utils包的类型，还需要在ui包的tsconfig.json中添加路径别名：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "utils": ["../packages/common/utils/src"]
    }
  },
  "include": ["../packages/common/utils/src/**/*"]
}

这样TypeScript就能直接解析import { fnUtils } from 'utils'的类型，同时配合上面的craco配置，Webpack也能正确转译代码。

额外注意事项 #

• 确保utils包的tsconfig.json中开启了类型声明："declaration": true，这样ui包能获取到完整的类型提示。
• 无需在utils包中执行编译或发布操作，开发时直接导入TS源文件即可。

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