react-scripts无法构建本地TypeScript类型包，但tsc编译成功的解决方案

1. 让react-scripts正常构建并支持热重载 #

react-scripts默认的webpack配置不会处理npm link关联的本地模块，导致解析失败。可以用以下两种方案解决：

方案一：用craco修改webpack配置（推荐） #

• 安装依赖：npm install @craco/craco --save-dev
• 替换package.json的scripts：将react-scripts start/build替换为craco start/build
• 在项目根目录创建craco.config.js，添加配置：

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      // 让webpack识别本地link的my-types模块
      webpackConfig.resolve.alias['my-types'] = require('path').resolve(__dirname, '../my-types');
      
      // 配置热重载监听my-types文件变化
      webpackConfig.watchOptions = {
        ...webpackConfig.watchOptions,
        ignored: /node_modules(?!\/my-types)/,
      };
      
      return webpackConfig;
    },
  },
};

方案二：eject后修改配置（不推荐，不可逆） #

执行npm run eject后，修改config/webpack.config.js：

• 在resolve.modules数组中添加my-types的实际路径
• 在babel-loader的include规则里加入my-types的路径

2. 设置outDir为dist后保持原有导入方式 #

核心是在my-types的package.json里配置入口映射，让webpack和TypeScript自动解析到dist目录：

• 确保my-types的tsconfig.json开启declaration: true（生成类型文件），并设置outDir: "./dist"
• 在my-types/package.json中添加以下配置：

{
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": "./dist/index.js",
    "./scores": "./dist/scores.js",
    "./event": "./dist/event.js"
    // 其他子路径按需补充
  },
  "typesVersions": {
    "*": {
      "scores": ["./dist/scores.d.ts"],
      "event": ["./dist/event.d.ts"]
    }
  }
}

配置完成后，import {Thing} from 'my-types/scores'会自动指向dist目录下的对应文件，无需手动添加dist前缀。同时要确保npm link的是my-types的根目录，而非dist目录。

3. 本地类型模块命名选择 #

• 不要用@types/my-types：@types/前缀是社区约定的第三方包类型补充模块（比如@types/lodash），不属于自定义业务模块的命名规范。
• 推荐用my-types，如果是团队内部共享，也可以添加私有作用域（如@your-team/my-types），避免命名冲突。如果想简化导入，可将所有类型统一导出到my-types/index.ts，用import {Everything} from 'my-types'的方式导入，前后端配置会更简单。

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