Monorepo中应用无法访问Shared文件夹问题求助

问题回顾 #

项目采用Monorepo架构，前端app、后端backend与共用类型目录shared同属根仓库。前端通过@shared/index导入共享类型时，TS编译器报错Module not found: Can't resolve '@shared/index'。

可能原因及解决方案 #

1. TypeScript未正确识别shared目录 #

你的tsconfig.json中include和exclude被注释，TS默认仅扫描当前目录下的文件，无法识别上级的shared目录。

解决：
取消注释并修正配置，确保包含src和shared的所有文件：

{
  "compilerOptions": {
    // 原有配置保持不变
  },
  "include": ["src/**/*", "../shared/**/*"],
  "exclude": ["node_modules"]
}

2. 构建工具未同步路径别名配置 #

TS的paths配置仅用于类型检查，Webpack、Vite等构建工具无法直接识别该别名，导致编译时找不到模块。

根据你的构建工具选择对应配置：

• Webpack：在webpack.config.js中添加别名配置

  const path = require('path');
  module.exports = {
    resolve: {
      alias: {
        '@shared': path.resolve(__dirname, '../shared')
      }
    }
  };
  

• Vite：在vite.config.ts中添加别名配置

  import { defineConfig } from 'vite';
  import path from 'path';
  
  export default defineConfig({
    resolve: {
      alias: {
        '@shared': path.resolve(__dirname, '../shared')
      }
    }
  });
  

• Create React App：使用craco或react-app-rewired修改配置（以craco为例）

  const path = require('path');
  module.exports = {
    webpack: {
      alias: {
        '@shared': path.resolve(__dirname, '../shared')
      }
    }
  };
  

3. 导入路径可简化（可选优化） #

由于shared目录下已有index.ts作为导出入口，可直接简化导入路径，避免不必要的/index后缀：

import { AccountRole } from '@shared';

4. 检查shared目录导出逻辑 #

确保shared/index.ts正确导出了所需的枚举和接口，例如：

// shared/index.ts
export * from './enums/AccountRole';
export * from './interfaces/User';
// 其他需要导出的类型

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