NX无法导入本地TypeScript库问题排查与解决

问题背景 #

使用 Node 16.16.6 和 Nx 14.5.8，按照《NX and Typescript》官方文档执行以下操作：

npx create-nx-workspace happynrwl --preset=ts
cd happynrwl
npm install @nrwl/web
nx generate @nrwl/js:library --name=hello-tsc --buildable
nx generate @nrwl/web:app demoapp

执行 nx serve demoapp 可正常启动Web应用，但尝试导入本地hello-tsc库时出现语法错误，Web应用尝试导入TS文件却无法解析TS语法，错误详情如下：

ERROR in ../hello-tsc/src/lib/hello-tsc.ts
Module build failed (from ../../node_modules/@nrwl/web/src/utils/web-babel-loader.js):
SyntaxError: /Users/james/projects/happynrwl/packages/hello-tsc/src/lib/hello-tsc.ts: Unexpected token, expected "{" (1:26)

> 1 | export function helloTsc(): string {
    |                           ^
 2 |   return 'hello-tsc';
 3 | }
 4 |
...
webpack compiled with 1 error (b022fd9df31b7e7f)

问题原因 #

1. 构建式库的默认行为：使用--buildable创建的JS库，默认仅在执行nx build时才会将TS源码编译为JS文件；而Nx在dev模式下会让Web应用直接引用库的TS源码文件。
2. Web应用的编译配置缺失：Nx 14.5.8的Web应用默认使用babel-loader处理代码，但未配置TypeScript语法支持，导致无法解析TS文件中的类型标注（如: string），从而抛出语法错误。

解决方法 #

方法一：为Web应用添加TS语法支持 #

1. 安装babel的TypeScript预设：

npm install -D @babel/preset-typescript

2. 修改apps/demoapp/babel.config.json，添加@babel/preset-typescript到预设列表：

{
  "presets": [
    "@nrwl/web/babel",
    "@babel/preset-typescript"
  ]
}

3. 重启nx serve demoapp，此时Web应用的babel-loader可以正确解析TS文件的语法。

方法二：引用库的编译产物 #

1. 先构建hello-tsc库：

nx build hello-tsc

2. 在Web应用中使用库的正式导入路径（Nx已在tsconfig中配置好paths）：

import { helloTsc } from '@happynrwl/hello-tsc';

该路径会自动指向库编译后的JS产物，避免直接引用TS源码。后续每次修改库代码后，需重新执行nx build hello-tsc，或使用nx build hello-tsc --watch监听源码变化自动重新构建。

方法三：配置Nx自动引用库的编译产物（推荐） #

修改nx.json中的targetDefaults，为Web应用的serve任务添加依赖，确保启动服务前先构建依赖库：

{
  "targetDefaults": {
    "serve": {
      "dependsOn": ["^build"]
    }
  }
}

这样执行nx serve demoapp时，Nx会自动先构建hello-tsc库，Web应用将直接使用编译后的产物，无需手动构建。

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