使用React.forwardRef包装后直接导出组件提示未定义问题排查

该问题是 ts-loader@8.x 版本与 TypeScript 4.2+、Webpack 5 搭配时的已知编译异常，核心原因是编译生成的代码执行顺序错误，触发了变量的暂时性死区（TDZ）：
当你直接编写 export const ForwardedComponent = forwardRef(Component) 语法时，ts-loader 8.3.0 生成的JS代码会错误地先尝试引用 ForwardedComponent 变量，再完成赋值操作，因此触发未定义报错。而先赋值给本地变量再导出别名的写法，生成的代码执行顺序符合预期，所以可以正常运行。

• 校验tsconfig配置
  检查tsconfig.json的compilerOptions配置项，确保基础配置正确：

  {
    "compilerOptions": {
      "jsx": "react-jsx", // React 17+推荐使用该配置，无需手动引入React
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true
    }
  }
  

  如果你仍在使用旧版 jsx: react 配置，需要确保每个tsx文件顶部都引入了React，漏写也可能触发类似的导出引用错误。
• 升级ts-loader版本
  该编译异常在ts-loader 9.x及以上版本已被官方修复，直接升级到兼容当前依赖的版本即可解决：

  npm install ts-loader@9.x --save-dev
  # 或yarn安装
  yarn add ts-loader@9.x --dev
  

• 临时兼容方案
  如果当前项目暂不允许升级依赖，可直接沿用你已经验证可行的写法：先定义本地变量接收forwardRef返回值，再导出该变量的别名，无需其他额外改动。
• 兜底排查
  若升级后仍存在问题，检查webpack配置中ts-loader的配置项，确认未开启错误的编译优化：如果配置了transpileOnly: true，需要同步升级配套的fork-ts-checker-webpack-plugin到最新版本，避免类型检查和编译逻辑不匹配导致的异常。

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