本地正常的React应用部署IBM Cloud后报错：无法解析watson-react-components

嘿，我碰到过类似的本地正常但部署到IBM Cloud（原Bluemix）后依赖缺失的问题，这种情况大多和生产环境的依赖安装、构建配置或者部署缓存有关，咱们一步步排查解决：

1. 先确认依赖是否在生产依赖列表里 #

首先检查你的package.json文件，看看watson-react-components是在dependencies还是devDependencies下。IBM Cloud的Node.js部署环境默认只会安装dependencies里的包，如果这个组件被误放到devDependencies，部署时就会跳过安装，自然找不到模块。

如果确实在devDependencies里，重新执行安装命令并指定保存到生产依赖：

npm install watson-react-components --save
# 用yarn的话就是：yarn add watson-react-components

2. 清除缓存，强制重新安装依赖 #

IBM Cloud的部署pack有时候会缓存之前的依赖，导致新安装的包没被正确拉取。可以试试这些操作：

• 本地先清理旧的依赖和锁文件，重新构建：

  rm -rf node_modules package-lock.json
  npm install
  npm run build # 如果你的应用需要构建生产包
  

• 部署时加上--no-cache参数，强制Cloud Foundry重新安装所有依赖：

  cf push -f manifest.yml --no-cache
  

3. 检查构建配置是否正确 #

如果你的应用用了自定义Webpack或Babel配置，可能部署时的构建过程没有正确处理这个第三方包：

• 确认Webpack配置没有把watson-react-components排除在打包范围外，比如不要在externals里配置这个包（除非你明确要CDN引入）。
• 有些第三方组件需要被Babel转译才能在生产环境运行，如果你的Babel配置排除了node_modules，可以单独把这个组件加进转译白名单：

  // 在babel.config.js或.babelrc里配置
  module.exports = {
    presets: ['react-app'],
    overrides: [
      {
        test: /node_modules\/watson-react-components/,
        presets: ['react-app']
      }
    ]
  };
  

4. 本地模拟生产环境验证 #

在部署前，先本地模拟生产环境运行，看看会不会出现同样的错误，这样能快速定位是本地构建问题还是部署环境问题：

• 运行生产构建命令后，用静态服务器启动构建产物：

  npm run build
  npx serve -s build
  

  如果这里也出现同样的错误，说明是本地构建的问题，比如依赖没正确打包；如果本地正常，那问题就出在IBM Cloud的部署流程上。

你提供的相关信息参考 #

导入语句示例 #

import { /* 你用到的组件 */ } from 'watson-react-components';

安装命令 #

npm install watson-react-components

安装输出（示例） #

（这里可以粘贴你安装时的成功日志，比如显示added X packages, changed Y packages等内容）

应用错误信息 #

Module not found: Can't resolve 'watson-react-components'

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