CODEWITHSUNDEEP
node.jsreactjsexpressgraphqlgraphql-tools
Elroy Toscano
Elroy Toscano

Reputation: 541

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

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?

Upvotes: 48

Views: 180069

Answers (11)

Tod Birdsall
Tod Birdsall

Reputation: 19074

I came across this quesiton when I ran into the same error message after installing the latest version of @vis.gl/react-google-maps.

I am not using WebPack. My site was originally created using create-react-app and my current version of react-scripts is 4.X.

I tried upgrading react-scripts to version 5, but that created new errors.

So, instead I kept react-scripts at version 4.X and installed Craco.

See this article by Patrick Desjardins for instructions and explanation on why to use Craco.

In my case, I went with the following craco.config.js configuration to solve this problem, which I got from here.

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

Upvotes: 0

Eduard
Eduard

Reputation: 535

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

Upvotes: 1

user321553125
user321553125

Reputation: 3236

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

Upvotes: 8

NickC
NickC

Reputation: 377

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.

Upvotes: 1

Sanket Vanani
Sanket Vanani

Reputation: 546

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.

Upvotes: -3

Rohit Kumar
Rohit Kumar

Reputation: 1341

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

Upvotes: 0

Ryan Kennedy
Ryan Kennedy

Reputation: 3637

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.

Upvotes: 21

Koray Aydemir
Koray Aydemir

Reputation: 455

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.

Upvotes: 24

Eduard
Eduard

Reputation: 535

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

Upvotes: -1

ViajanDee
ViajanDee

Reputation: 684

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

Upvotes: -1

Eduard
Eduard

Reputation: 535

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

Upvotes: 29

Related Questions