Webpack编译Apollo与GraphQL模块失败问题求助

核心原因 #

你的问题本质是ES模块（.mjs）与CommonJS模块的互操作不兼容，CRA默认webpack配置没有正确识别graphql的ES模块导出，导致graphql-tag无法读取到graphql的导出内容。以下是几个可行的解决方案：

方案1：优先对齐依赖版本（最简单） #

graphql-tag与graphql的版本必须严格兼容，版本不匹配会直接导致导出识别失败：

1. 检查当前项目中graphql的版本及依赖树：

npm ls graphql

2. 如果存在多个版本的graphql，或者版本不兼容，统一安装匹配的版本（以graphql 16.x为例，对应graphql-tag 2.12+）：

npm install graphql@^16.8.1 graphql-tag@^2.12.6 --save

3. 删除node_modules和package-lock.json，重新安装依赖：

rm -rf node_modules package-lock.json
npm install

4. 重新执行npm start。

方案2：用react-app-rewired自定义webpack配置（彻底解决） #

CRA默认不允许修改webpack配置，借助react-app-rewired可以在不eject的情况下调整配置：

1. 安装必要依赖：

npm install react-app-rewired customize-cra --save-dev

2. 在项目根目录创建config-overrides.js文件，添加以下配置：

const { override, addWebpackResolve, addWebpackModuleRule } = require('customize-cra');

module.exports = override(
  // 优先解析ES模块，指定graphql的入口文件
  addWebpackResolve({
    extensions: ['.mjs', '.js', '.jsx', '.json'],
    mainFields: ['module', 'main'],
    alias: {
      'graphql': require.resolve('graphql/index.mjs')
    }
  }),
  // 让graphql-tag模块也跳过完全指定的解析规则
  addWebpackModuleRule({
    test: /\.js$/,
    include: /node_modules\/graphql-tag/,
    resolve: {
      fullySpecified: false
    }
  })
);

3. 修改package.json中的scripts命令，替换为react-app-rewired：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

4. 重新执行npm start。

方案3：临时降级graphql版本（快速规避） #

如果以上方案都无法生效，可以暂时降级到graphql 15.x版本（该版本以CommonJS模块为主，兼容性更好）：

npm install graphql@^15.8.0 --save

重新安装依赖后启动项目即可。

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