create-react-app项目引入@ts-morph/bootstrap构建报错如何解决？

报错根因 #

@ts-morph 系列包是面向Node.js环境设计的，默认依赖多个Node.js内置核心模块、以及Node环境下的动态导入逻辑，在前端React项目中直接引入打包，自然会触发两类报错：

1. perf_hooks 是Node.js内置性能检测模块，浏览器环境不存在，webpack5默认也不会自动打包Node核心模块的polyfill，所以报模块找不到
2. @ts-morph/common 里的typescript.js用了动态表达式导入依赖，webpack无法静态解析，所以抛出关键依赖告警

解决方案分两类场景处理 #

场景1：你在构建/工具脚本中使用ts-morph

不要把@ts-morph/bootstrap的引入写在React前端业务代码里，挪到Node.js环境运行的脚本中（比如craco配置文件、自定义代码生成脚本、打包钩子脚本），这类脚本运行在Node环境，天然兼容ts-morph，无需额外配置即可正常运行。

场景2：你确实需要在浏览器端运行ts-morph相关逻辑

按以下步骤修改配置即可解决：

1. 先安装缺失的Node核心模块polyfill依赖：

npm install path-browserify os-browserify crypto-browserify stream-browserify

2. 修改你的craco.config.js配置，替换原有内容为如下：

const webpack = require('webpack');

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      // 补充Node核心模块polyfill配置，标记浏览器不存在的模块直接忽略
      webpackConfig.resolve.fallback = {
        ...webpackConfig.resolve.fallback,
        perf_hooks: false,
        fs: false,
        path: require.resolve('path-browserify'),
        os: require.resolve('os-browserify/browser'),
        crypto: require.resolve('crypto-browserify'),
        stream: require.resolve('stream-browserify'),
      };
      // 匹配准确的typescript.js文件路径，noParse规则才能生效
      webpackConfig.module.noParse = [
        ...(webpackConfig.module.noParse || []),
        /@ts-morph\/common\/dist\/typescript\.js$/
      ];
      // 忽略动态依赖相关的告警
      webpackConfig.ignoreWarnings = [
        warning => warning.module?.resource?.includes('@ts-morph/common/dist/typescript.js') && warning.message.includes('Critical dependency')
      ];
      return webpackConfig;
    }
  }
}

修改后重启项目，构建即可正常运行。

补充说明 #

如果你的需求只是在浏览器端做TypeScript语法解析、代码生成，更推荐直接使用typescript官方的浏览器构建版本，或使用@babel/parser+@babel/generator的组合，轻量且对浏览器环境兼容性更好，不需要做额外兼容配置。

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