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

Posted 2023-03-08

【中文标题】无法从非 EcmaScript 模块导入命名的导出 XXXX（只有默认导出可用）

【英文标题】：Can't import the named export XXXX from non EcmaScript module (only default export is available)

【发布时间】：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 相关的问题。

这个问题有解决办法吗？

【参考方案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

【讨论】：

我添加了文件，错误依旧