React集成AWS Amplify导入时出现Can't resolve './graphql'错误

这个报错是Webpack 5的严格ESM模块解析规则，和@aws-amplify/pubsub依赖的graphql包的导入语法不匹配导致的，可通过以下方案解决：

方案1：锁定graphql依赖版本（最简单，无需改构建配置） #

直接在项目配置中强制指定兼容的graphql版本即可：

• 先删除现有依赖缓存：

rm -rf node_modules package-lock.json yarn.lock pnpm-lock.yaml

• 在package.json中添加对应规则：
  如果使用npm v8+：

  {
    "overrides": {
      "graphql": "15.8.0"
    }
  }
  

  如果使用yarn/pnpm：

  {
    "resolutions": {
      "graphql": "15.8.0"
    }
  }
  

• 重新安装依赖：

npm install
# 或 yarn install / pnpm install

重启项目即可解决。

方案2：修改webpack配置（适合自定义构建配置的项目） #

如果不想锁定graphql版本，可以调整webpack规则关闭严格扩展名校验：
在webpack.config.js中添加如下配置：

module.exports = {
  // 其余原有配置保持不变
  module: {
    rules: [
      {
        test: /\.m?js$/,
        resolve: {
          fullySpecified: false
        },
        include: /node_modules/
      }
    ]
  }
}

如果是用CRA创建的未eject项目，可以用craco修改配置：

1. 安装craco：

npm install @craco/craco --save-dev

2. 项目根目录创建craco.config.js，填入上面的webpack配置
3. 修改package.json的scripts字段，把所有react-scripts替换为craco：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

重启项目即可。

方案3：升级Amplify到最新版本 #

这个兼容性问题在新版amplify中已经修复，直接升级依赖即可：

npm install aws-amplify@latest @aws-amplify/ui-react@latest

删除依赖缓存后重启项目即可。

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