Heroku部署TypeScript React应用时报找不到@storybook/react模块错误

• Heroku生产环境默认不会安装devDependencies下的依赖：Heroku部署Node.js应用时会默认将NODE_ENV设置为production，执行依赖安装时只会下载package.json中dependencies字段内的包，你将@storybook/react放在了devDependencies中，生产环境没有对应的安装包。
• Storybook相关文件被纳入生产编译范围：你的tsconfig.json中include配置为src/**/*，所有src下的文件都会被TS编译扫描到，而你的storybook相关引入都存放在src/components目录下，生产编译时会尝试加载@storybook/react，自然找不到对应模块。本地运行时你安装了全部依赖（包含devDependencies），所以不会触发报错。

你可以根据自己的实际需求选择以下任意一种方案：

• 方案1（推荐）：排除story相关文件的生产编译
  在tsconfig.json中新增exclude配置，过滤掉所有storybook相关的文件，示例配置如下：

  {
    "compilerOptions": {/* 你原有配置保持不变 */},
    "include": ["src/**/*"],
    "exclude": [
      "src/**/*.stories.tsx",
      "src/**/*.stories.jsx"
    ]
  }
  

  该方案无需调整依赖位置，也不会增大生产打包体积。
• 方案2：迁移storybook依赖到生产依赖
  如果你确实需要在生产环境使用storybook相关能力，可以将devDependencies中所有@storybook开头的包移动到dependencies中，Heroku部署时会自动安装这些依赖即可解决报错。
• 方案3：强制Heroku安装全部开发依赖
  你可以在Heroku的环境变量配置中新增变量：
  • 如果使用npm作为包管理工具，新增NPM_CONFIG_PRODUCTION=false
  • 如果使用yarn作为包管理工具，新增YARN_PRODUCTION=false
    配置后Heroku会安装所有dependencies和devDependencies的包，也可以解决该问题。

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