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?

Koray AydemirKoray Aydemir 3003 silver badges9 bronze badges · Accepted Answer · 2022-07-12 22:37:23Z

13

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.

answered Jul 12, 2022 at 22:37

Koray Aydemir

3003 silver badges9 bronze badges

2

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

– Vimalraj

Jan 31 at 8:14
doing this makes most of other package that previously installed (and listed in package.json) from 3.x.x become unsupported.

– Hanif

Jun 14 at 4:12

EduardEduard 3011 silver badge4 bronze badges · Accepted Answer · 2021-09-27 08:02:47Z

10

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

answered Sep 27, 2021 at 8:02

Eduard

3011 silver badge4 bronze badges

5

9

I added the file, the error still persists

– Elroy Toscano

Sep 27, 2021 at 8:04
42

"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?

– Captain Hypertext

Apr 21, 2022 at 22:34
4

How is the provided link related?

– Kenneth

Oct 5, 2022 at 16:07
2

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

– peterh

Apr 5 at 23:06
1

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

– General Grievance

Apr 6 at 12:54

Ryan KennedyRyan Kennedy 3,2754 gold badges30 silver badges47 bronze badges · Accepted Answer · 2022-12-30 01:44:20Z

To clarify Eduard’s answer:

Add .mjs to the extensions array in your webpack.config.js. This ensures that the relevant files can be located at build time.
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.

EduardEduard 3011 silver badge4 bronze badges · Accepted Answer · 2021-09-27 10:39:14Z

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

I've tried both the solutions, unfortunately both have the same error — Sep 27, 2021 at 10:58
It seems insane that these two answers have almost nothing in common. lol. — Jun 25, 2022 at 14:33

Rohit KumarRohit Kumar 9839 silver badges11 bronze badges · Accepted Answer · 2023-01-31 15:01:20Z

1

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

answered Jan 31 at 15:01

Rohit Kumar

9839 silver badges11 bronze badges

Cedric Ipkiss 5,6622 gold badges43 silver badges72 bronze badges · Accepted Answer · 2022-01-26 13:12:44Z

0

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

edited Jan 26, 2022 at 13:12

Cedric Ipkiss

5,6622 gold badges43 silver badges72 bronze badges

answered Sep 27, 2021 at 11:06

Eduard

3011 silver badge4 bronze badges

1

1

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

– Elroy Toscano

Sep 27, 2021 at 12:58

Sanket VananiSanket Vanani 2443 silver badges7 bronze badges · Accepted Answer · 2023-07-26 11:23:55Z

0

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.

answered Jul 26 at 11:23

Sanket Vanani

2443 silver badges7 bronze badges

NickCNickC 3321 silver badge15 bronze badges · Accepted Answer · 2023-08-29 22:56:11Z

0

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.

answered 53 mins ago

NickC

3321 silver badge15 bronze badges

ViajanDeeViajanDee 6544 silver badges15 bronze badges · Accepted Answer · 2022-01-26 06:00:08Z

-2

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

answered Jan 26, 2022 at 6:00

ViajanDee

6544 silver badges15 bronze badges

2

renamed, didn't work, thanks though

– fartwhif

Jan 28, 2022 at 17:04
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

– ViajanDee

Jan 31, 2022 at 20:41

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