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?

Mohican

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

Lallans

I added the file, the error still persists – Mohican

"Looks something like this" Like what? What options in this code block are relevant? What do they do? What does the error message even mean? – Hippolytus

How is the provided link related? – Ardeha

I am sorry but this answer, contrary to its score, is the school example of the NAA. – Stephi

I think it's saying to account for the .mjs? Ryan Kennedy's answer seems to think so. – Tontine

I am using craco. I only needed the block "rules". I did not modify "extensions". – Abernathy

Thanks for the solution. Extending the webpack config worked for me. The answer from Ryan below, is explaining a bit more this solution. – Krol

Answer 2

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.

Trichromat

It resolves but create further issues with importing svg files, eslint plugin issues – Gastrostomy

doing this makes most of other package that previously installed (and listed in package.json) from 3.x.x become unsupported. – Bosworth

When you try to force fix vulnerabilities, it happens. I have the same issue and when I check package.json file it has react-scripts: 3.x.x. Now, I change for your answer and It works!!! – Microbarograph

Answer 3

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.

Astigmatism

Answer 4

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;
      },
    },
  };

Aerosphere

Literally what I needed thank you! – Aeronaut

Answer 5

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

Lallans

I've tried both the solutions, unfortunately both have the same error – Mohican

It seems insane that these two answers have almost nothing in common. lol. – Divorcement

Answer 6

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

Musette

Answer 7

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.

Vienna

Answer 8

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

Lallans

Tried it, didn't work again, appreciate the help – Mohican

Answer 9

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

Shields

renamed, didn't work, thanks though – Chaudfroid

I can see that you're getting the error mainly because of @graphql-tools/graphql-file-loader try renaming index.mjs in ./node_modules/@graphql-tools/graphql-file-loader/ to index.mjs_old. PS. Just make sure that there is another file at the same location called index.js – Shields

Answer 10

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.

Childs