Can't import the named export XXXX from non EcmaScript module (only default export is available-CodePudding

I have a client-server setup, in which the client(create-react-app) runs on localhost:3000 and the server is an express server which is built on node and I'm attempting to build graphql schema-resolvers setup.

I'm able to import .graphql files on the server, however, on the client side, I'm using this setup by graphql-tools.

When I'm attempting to build the schema-resolvers on the frontend, I'm importing

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

...which causes this error: ./node_modules/@graphql-tools/graphql-file-loader/index.mjs Can't import the named export 'AggregateError' from non EcmaScript module (only default export is available)

After researching, I've found out that this is an issue related with webpack.

Is there any resolution to this issue?

CodePudding user response：

the solution is to make sure that you have a webpack.config.js file in the root of your project directory that looks something like this:

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

also you can take a look https://github.com/vanruesc/postprocessing

CodePudding user response：

Here is a another example for the glahql library

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']
        }
    }
}

CodePudding user response：

try this one, hope will help

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