使用craco 7与react-scripts 5启动React应用时服务器无限卡住

使用@craco/craco@7.0.0搭配react-scripts@5.0.1启动React应用时，服务器一直停留在Starting the development server...状态，无任何错误或警告输出，无法正常进入下一步。

环境配置 #

package.json中相关依赖及脚本配置：

{
  "dependencies": {
    "react-scripts": "^5.0.1",
    "@craco/craco": "^7.0.0"
  },
  "scripts": {
    "start": "REACT_APP_RELEASE_STAGE=development NODE_ENV=development craco start --config craco.config.js",
    // 其他脚本...
    "cracoConfig": "craco.config.js"
  }
}

craco配置文件内容 #

craco.config.js：

module.exports = {
  reactScriptsVersion: 'react-scripts',
  typescript: {
    enableTypeChecking: true,
  },
  eslint: {
    enable: false
  },
  webpack: {
    alias: {},
    plugins:[],
    configure: {
      optimization: {
        runtimeChunk: false,
        splitChunks: {
          chunks: "all",
          cacheGroups: {
            default: false,
            vendors: false,
          },
        },
      },
      output: {
        filename: "my-file-name.js",
      },
    },
  },
}

排查与解决方法 #

• 调整webpack output配置：开发环境下react-scripts默认使用带哈希的动态文件名，强制设置固定的filename: "my-file-name.js"可能干扰编译流程。尝试注释掉该配置，或改为与默认一致的格式：filename: 'static/js/bundle.js'，再重新启动。
• 临时关闭TypeScript类型检查：将typescript.enableTypeChecking设为false，若应用能正常启动，说明是未处理的类型错误导致craco静默阻塞，需逐一修复项目中的类型问题。
• 清理编译缓存：删除node_modules/.cache目录（Windows为node_modules\.cache），再执行npm start，缓存损坏可能导致启动停滞。
• 调整版本兼容性：尝试将@craco/craco降级到6.4.3（该版本与react-scripts@5.x兼容性更稳定），或确认react-scripts是否更新到最新的5.x小版本。
• 简化craco配置：暂时注释掉webpack configure中的优化和output配置，仅保留基础结构，若能正常启动，再逐步添加配置项，定位具体导致阻塞的设置。

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