无法从非EcmaScript模块导入命名导出XXXX (仅默认导出可用)

Question

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

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

当我试图在前端构建模式解析器时，我导入了

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

...which导致此错误：./node_modules/@graphql-tools/graphql-file-loader/index.mjs无法从非...which模块导入命名导出'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

下面是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']
        }
    }
}

Answer 3

试试这个，希望能帮上忙

index.js目录webpack -测试光盘webpack-测试npm init -y npm安装--保存图形cli webpack webpack-cl./node_modules/.bin/ webpack-cli mkdir