无法从非 EcmaScript 模块导入命名的导出 XXXX（只有默认导出可用）答案

【问题标题】：Can't import the named export XXXX from non EcmaScript module (only default export is available)无法从非 EcmaScript 模块导入命名的导出 XXXX（只有默认导出可用）
【发布时间】：2021-11-19 09:25:02
【问题描述】：

我有一个客户端-服务器设置，其中客户端（create-react-app）在 localhost:3000 上运行，服务器是一个构建在节点上的快速服务器，我正在尝试构建 graphql 模式解析器设置。

我可以在服务器上导入 .graphql 文件，但是在客户端，我使用的是 graphql-tools 的设置。

当我尝试在前端构建架构解析器时，我正在导入

import { GraphQLFileLoader } from '@graphql-tools/graphql-file-loader';
import { addResolversToSchema } from '@graphql-tools/schema';
import { loadSchema } from '@graphql-tools/load';

...导致此错误： ./node_modules/@graphql-tools/graphql-file-loader/index.mjs 无法从非 EcmaScript 模块导入命名导出“AggregateError”（只有默认导出可用）

经过研究，我发现这是一个与 webpack 相关的问题。

这个问题有解决办法吗？

【问题讨论】：

标签： node.js reactjs express graphql graphql-tools

【解决方案1】：

试试这个，希望对你有帮助

mkdir webpack-test
cd webpack-test
npm init -y
npm install --save graphql webpack webpack-cli
./node_modules/.bin/webpack-cli index.js

【讨论】：

试过了，还是不行，感谢帮助

【解决方案2】：

我在每个 @graphql-tools 子文件夹（merge、mock 和 schema）中手动将 index.mjs 重命名为 index.mjs_old，并且成功了。

【讨论】：

重命名，没用，谢谢
我可以看到您收到错误主要是因为 @graphql-tools/graphql-file-loader 尝试将 ./node_modules/@graphql-tools/graphql-file-loader/ 中的 index.mjs 重命名为 index.mjs_old。 PS。只需确保在同一位置有另一个名为 index.js 的文件
在包含有问题文件的包中，我正试图开始工作，@matheo/datepicker，旁边没有“正常”模块 - 我猜这就是它对你有用的原因，因为你的拥有它们。

【解决方案3】：

这是 glahql 库的另一个示例

module.exports = {
    chainWebpack: config => {
        // ...other chains
        config.module // fixes https://github.com/graphql/graphql-js/issues/1272
            .rule('mjs$')
            .test(/\.mjs$/)
            .include
                .add(/node_modules/)
                .end()
            .type('javascript/auto');
    },
    configureWebpack: {
        resolve: {
            // .mjs needed for https://github.com/graphql/graphql-js/issues/1272
            extensions: ['*', '.mjs', '.js', '.vue', '.json']
        }
    }
}

【讨论】：

这两种解决方案我都试过了，不幸的是两者都有同样的错误

【解决方案4】：

解决方案是确保在项目目录的根目录中有一个 webpack.config.js 文件，如下所示：

const config = {
  mode: 'production', // "production" | "development" | "none"
  resolve: {
    extensions: ['*', '.mjs', '.js', '.json']
  },
  module: {
    rules: [
      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto'
      }
    ]
  }
}

module.exports = config

你也可以看看https://github.com/vanruesc/postprocessing

【讨论】：

我添加了文件，错误依旧