无法从非 EcmaScript 模块导入命名导出 XXXX（仅提供默认导出）

Question

我有一个客户端-服务器设置，其中客户端（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相关的问题。

这个问题有解决办法吗？

Answer 1

解决方案是确保项目目录的根目录中有一个 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

Answer 2

确保您有"react-scripts": "^5.0.1"package.json 依赖项，然后使用 command npm install。由于某种原因，我的反应脚本版本是 3.xx，这导致了问题。我也用过cra。

Answer 3

为了澄清爱德华的答案：

1. 添加.mjs到webpack.config.jsextensions中的数组。这确保了可以在构建时找到相关文件。
2. 添加{ test: /\.mjs$/, include: /node_modules/, type: 'javascript/auto' }到webpack.config.jsrules中的数组。这会导致 Webpack 将文件识别为模块，并更改处理导入的方式。.mjs