使用yarn/npm link共享TypeScript库导出types和enum报错如何解决

报错原因 #

未eject的Create React App（CRA）默认配置下，Babel/TS 编译器仅会处理项目src目录内的源码文件。你通过yarn/npm link引入的共享库属于外部目录，其TS源码不会被CRA的编译链处理，TS专属的enum语法直接暴露给webpack，无法被识别因此抛出解析错误。

解决方案 #

方案1：提前编译共享库（最稳妥，无需修改前端配置） #

这是最推荐的方案，共享库本身作为独立包，提前编译为纯JS+类型声明文件后再供上下游项目引用：

1. 在共享库根目录配置tsconfig.json，开启类型声明生成：

{
  "compilerOptions": {
    "outDir": "./dist",
    "declaration": true,
    "target": "ESNext",
    "module": "ESNext"
  },
  "include": ["./src/**/*"]
}

2. 共享库每次更新后执行tsc命令完成编译
3. 前后端项目引用共享库时，直接引用编译后的dist目录产物，不要引用src下的TS源码

方案2：用const对象替代enum（零配置改动） #

如果不想调整编译配置，可以把TS专属的enum替换为运行时兼容的const对象+类型组合，使用体验和enum完全一致，且不存在编译语法问题：

export const SESSION_STATUS = {
    SCHEDULED: "SCHEDULED",
    LIVE: "LIVE",
    ENDED: "ENDED",
    RUNNING: "RUNNING"
} as const;
export type SESSION_STATUS = typeof SESSION_STATUS[keyof typeof SESSION_STATUS];

方案3：用craco覆盖CRA编译配置（适合需要热更共享库的开发场景） #

如果开发阶段需要频繁修改共享库代码，不想每次手动编译，可以通过craco修改CRA默认配置，将共享库目录加入编译范围：

1. 前端项目安装依赖：npm i @craco/craco -D
2. 根目录新建craco.config.js，添加如下配置，注意把路径替换为你本地共享库的实际绝对路径：

const path = require('path');
module.exports = {
  webpack: {
    configure: (config) => {
      // 找到babel-loader配置项
      const babelLoader = config.module.rules.find(rule => rule.oneOf)
        .oneOf.find(rule => rule.loader && rule.loader.includes('babel-loader'));
      // 把共享库目录加入babel编译范围
      babelLoader.include = [
        babelLoader.include,
        path.resolve(__dirname, '../server/presenter-common')
      ];
      return config;
    }
  }
}

3. 修改package.json里的启动脚本，把react-scripts替换为craco：

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

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