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

Question

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?

Answer 1

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

Answer 2

Here is a another example for the graphql 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']
        }
    }
}

Answer 3

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

Answer 4

I manually renamed index.mjs to index.mjs_old in every @graphql-tools subfolders (merge, mock, and schema) and it worked.

Answer 5

Make sure you have "react-scripts": "^5.0.1" on your package.json dependencies, then use command npm install. For some reason my react-scripts version was 3.x.x and that was causing the problem. I used cra too.

Answer 6

To clarify Eduard's answer:

1. Add .mjs to the extensions array in your webpack.config.js. This ensures that the relevant files can be located at build time.
2. Add { test: /\.mjs$/, include: /node_modules/, type: 'javascript/auto' } to your rules array in webpack.config.js. This causes Webpack to recognize .mjs files as modules, and changes the way they are handled for imports.

Answer 7

Just check once extension of the file like .js, .jsx. is it matching with other files.

In my case I missed to add .js extension when I created it

Answer 8

import React from "react";
const useMemo = React.useMemo;
const useState = React.useState;
const useCallback = React.useCallback;

I changed code like above and it worked for me.

Answer 9

It is worth noting that the webpack.config.js file fix won't work if you are using create-react-app unless you eject, which isn't great.

Answer 10

If you are using CRACO for react app, add the following webpack configuration to your craco.config.js:

  module.exports = {
    webpack: {
      configure: (webpackConfig, { env, paths }) => {
        // Add a rule to handle .mjs files
        webpackConfig.module.rules.push({
          test: /\.mjs$/,
          include: /node_modules/,
          type: 'javascript/auto',
        });
  
        return webpackConfig;
      },
    },
  };