TypeScript React项目路径别名配置后无法编译运行求助

VS Code能识别别名是因为它读取了tsconfig.json的paths配置，但构建工具（这里Nx默认使用Webpack）并不会自动继承TypeScript的路径映射规则，必须单独配置。

解决方案步骤 #

1. 用Nx内置路径映射（优先推荐） #

如果是Nx项目，直接在**LW-fe根目录的nx.json**中添加路径映射，Nx会自动同步到TypeScript配置和Webpack配置：

{
  "paths": {
    "@lw/data-access": ["src/libs/data-access/index.ts"],
    "@lw/components": ["src/libs/components/index.ts"],
    "@lw/web-sockets": ["src/libs/web-sockets/index.ts"],
    "@lw/wrappers": ["src/libs/components/wrappers/index.ts"]
  }
}

路径需与你tsconfig.base.json中的配置对应，以LW-fe目录为基准。

2. 手动配置Webpack别名（Nx自动同步失效时用） #

在LW-fe目录下创建webpack.config.js文件，添加别名映射：

const { composePlugins, withNx } = require('@nrwl/webpack');
const path = require('path');

module.exports = composePlugins(withNx(), (config) => {
  config.resolve.alias = {
    ...config.resolve.alias,
    '@lw/data-access': path.resolve(__dirname, './src/libs/data-access/index.ts'),
    '@lw/components': path.resolve(__dirname, './src/libs/components/index.ts'),
    '@lw/web-sockets': path.resolve(__dirname, './src/libs/web-sockets/index.ts'),
    '@lw/wrappers': path.resolve(__dirname, './src/libs/components/wrappers/index.ts'),
  };
  return config;
});

接着在LW-fe/project.json的build目标中指定这个配置文件：

{
  "targets": {
    "build": {
      "executor": "@nrwl/webpack:webpack",
      "options": {
        "webpackConfig": "./webpack.config.js",
        // 保留原有其他配置
      }
    }
  }
}

3. 验证关键细节 #

• 确认web-sockets-context.tsx中确实导出了useWebSocket，比如：

  export const useWebSocket = () => {
    // 你的Hook逻辑
  };
  

• 重启VS Code清空编辑器缓存，避免旧配置干扰
• 清理Nx缓存后重新构建：nx reset && nx build

问题根源 #

TypeScript的paths仅为TS编译器和代码编辑器提供路径解析规则，实际构建时由Webpack处理模块解析，Webpack不会读取tsconfig.json的paths配置，因此必须单独配置Webpack的resolve.alias来匹配TS的路径别名。

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