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?

score 14 · Answer 1 · answered Jul 12 '22 at 22:37

14

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 '22 at 22:37

Koray Aydemir

310
3
9

It resolves but create further issues with importing svg files, eslint plugin issues – Vimalraj Jan 31 '23 at 08: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 '23 at 04:12

score 11 · Answer 2 · answered Sep 27 '21 at 08:02

11

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 '21 at 08:02

Eduard

311
1
4

9

I added the file, the error still persists – Elroy Toscano Sep 27 '21 at 08: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 '22 at 22:34
4

How is the provided link related? – Kenneth Oct 05 '22 at 16:07
2

I am sorry but this answer, contrary to its score, is the school example of the NAA. – peterh Apr 05 '23 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 06 '23 at 12:54

score 3 · Answer 3 · answered Dec 30 '22 at 01:44

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.

score 1 · Answer 4 · answered Sep 27 '21 at 10:39

1

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

answered Sep 27 '21 at 10:39

Eduard

311
1
4

2

I've tried both the solutions, unfortunately both have the same error – Elroy Toscano Sep 27 '21 at 10:58
1

It seems insane that these two answers have almost nothing in common. lol. – jdbertron Jun 25 '22 at 14:33

score 1 · Answer 5 · answered Jan 31 '23 at 15:01

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 '23 at 15:01

Rohit Kumar

983
9
11

score 0 · Answer 6 · edited Jan 26 '22 at 13:12

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 '22 at 13:12

Cedric Ipkiss

5,662
2
43
72

answered Sep 27 '21 at 11:06

Eduard

311
1
4

1

Tried it, didn't work again, appreciate the help – Elroy Toscano Sep 27 '21 at 12:58

score 0 · Answer 7 · answered Jul 26 '23 at 11:23

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 '23 at 11:23

Sanket Vanani

244
3
7

score 0 · Answer 8 · answered Aug 29 '23 at 22:56

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 Aug 29 '23 at 22:56

NickC

332
1
15

score -2 · Answer 9 · answered Jan 26 '22 at 06:00

-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 '22 at 06:00

ViajanDee

654
4
15

renamed, didn't work, thanks though – fartwhif Jan 28 '22 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 '22 at 20:41

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

9 Answers9

Linked