React CRA(TypeScript)：TSX文件无法解析枚举，TS文件正常

1. 库打包输出不匹配：你用Rollup生成的PollutantKey是declare enum，这属于仅用于类型检查的 ambient 类型，没有对应的运行时JS代码。如果Rollup没有在lib/models/PollutantKey路径下生成对应的JS文件，webpack处理.tsx文件时（会严格解析实际模块）就会找不到文件报错；而.ts文件可能仅通过TS类型检查通过，未触发webpack对该模块的运行时解析。
2. CRA模块解析规则差异：Create React App的webpack配置对.ts和.tsx文件的处理逻辑有细微区别，.tsx文件会同时进行TS类型检查和JS编译打包，对模块的实际存在性校验更严格；而.ts文件可能仅完成类型检查，未触发webpack对该模块的实际文件查找。
3. 库的package.json配置缺失：如果库的package.json没有正确配置exports或typesVersions字段，webpack在解析.tsx文件时无法正确映射到类型文件和JS文件的路径，导致解析失败。

• 直接从库根导入（优先尝试）：如果你的UI库入口文件已经导出了PollutantKey，修改导入路径为：

  import { PollutantKey } from "my-lib";
  

• 修复库的Rollup配置：
  • 将declare enum改为普通enum（去掉declare），确保TS编译时生成对应的运行时JS代码；
  • 调整Rollup配置，确保lib/models下的文件被正确打包，生成对应的.js和.d.ts文件，路径保持一致。
• 完善库的package.json配置：添加exports和typesVersions字段，明确模块路径映射：

  {
    "exports": {
      "./lib/models/PollutantKey": "./lib/models/PollutantKey.js"
    },
    "typesVersions": {
      "*": {
        "lib/models/PollutantKey": ["./lib/models/PollutantKey.d.ts"]
      }
    }
  }
  

• 修改CRA的webpack配置（需借助工具）：
  使用craco或react-app-rewired覆盖默认webpack配置，添加路径别名确保webpack能找到对应文件：

  // craco.config.js 或 config-overrides.js
  module.exports = {
    webpack: {
      configure: (webpackConfig) => {
        webpackConfig.resolve.alias = {
          ...webpackConfig.resolve.alias,
          "my-lib/lib/models/PollutantKey": require.resolve("my-lib/lib/models/PollutantKey.js")
        };
        return webpackConfig;
      }
    }
  };
  

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