create-react-app引入graphql-tools时报非ES模块无法导入命名导出错误如何解决

报错原因 #

该错误由webpack对.mjs格式ES模块的识别规则不兼容导致：新版@graphql-tools/graphql-file-loader使用ESM规范做命名导出，而旧版webpack默认将node_modules下的.mjs文件识别为CommonJS模块，仅支持默认导出，因此无法读取命名导出的AggregateError。

可行解决方法 #

方案1：未eject的CRA项目通过react-app-rewired修改配置（无需eject） #

• 安装依赖：
  npm install customize-cra react-app-rewired --save-dev
• 项目根目录新建config-overrides.js，写入如下配置：

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

module.exports = override((config) => {
  config.module.rules.push({
    test: /\.mjs$/,
    include: /node_modules/,
    type: "javascript/auto"
  });
  return config;
});

• 修改package.json中的scripts字段，将react-scripts替换为react-app-rewired：

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

• 重启项目即可生效。

方案2：已eject/自定义webpack配置的项目直接修改规则 #

在webpack配置文件的module.rules数组中新增如下规则：

{
  test: /\.mjs$/,
  include: /node_modules/,
  type: "javascript/auto"
}

修改后重启项目即可。

方案3：降级包版本 #

不想修改构建配置的话，可将相关graphql-tools包降级到兼容CommonJS规范的旧版本：
npm install @graphql-tools/graphql-file-loader@7 @graphql-tools/schema@9 @graphql-tools/load@7

方案4：替换导入语法 #

针对GraphQLFileLoader单独改用默认导入：
将import { GraphQLFileLoader } from '@graphql-tools/graphql-file-loader';
修改为import GraphQLFileLoader from '@graphql-tools/graphql-file-loader';

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