graphql-js: ESM named exports are not available with "type": "module"

The way I resolved is to add

           {
                test: /\.m?js/,
                resolve: {
                    fullySpecified: false
                }
            },

to the [rules] section.

hi @kettanaito looks like webpack 5 doesn’t resolve it anymore. I’m getting this error:

ERROR in ../../../node_modules/graphql/index.mjs 25:0-49
Module not found: Error: Can't resolve './version' in 'node_modules\graphql'
Did you mean 'version.js'?
BREAKING CHANGE: The request './version' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ../../../node_modules/graphql/index.mjs 27:0-49
Module not found: Error: Can't resolve './graphql' in 'node_modules\graphql'
Did you mean 'graphql.js'?
BREAKING CHANGE: The request './graphql' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ../../../node_modules/graphql/index.mjs 29:0-40:50
Module not found: Error: Can't resolve './type' in 'node_modules\graphql'
Did you mean 'index.js'?
BREAKING CHANGE: The request './type' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ../../../node_modules/graphql/index.mjs 42:0-48:205
Module not found: Error: Can't resolve './language' in 'node_modules\graphql'
Did you mean 'index.js'?
BREAKING CHANGE: The request './language' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ../../../node_modules/graphql/index.mjs 50:0-122
Module not found: Error: Can't resolve './execution' in 'node_modules\graphql'
Did you mean 'index.js'?
BREAKING CHANGE: The request './execution' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

Anyone got a solution to get graphql/amplify working with CRA5?

Upgrading react-scripts to 5.0.0 and webpack to 5.66.0 got me to the same point. Currently getting the following message pretty much everywhere

Did you mean 'graphql.mjs'?
BREAKING CHANGE: The request './graphql' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

I encountered this problem when adding an amplify back-end to my application. The fix described by @flyandi (THANKS!) worked for me but now my build is slowed because webpack must transpile node_modules . Shouldn’t this issue be addressed in graphql imports/exports?

changes to my webpack.config.js …

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.m?jsx?$/,
	resolve: {
	  fullySpecified: false
	},
        // ignore transpiling JavaScript from node_modules as they should be ready to go OOTB
        // exclude: /node_modules/,
        ...
      }
    ]
  },
  ...
};

Same problem here after upgrading to react-scripts@5.0.0 in a non-ejected CRA project

I have the same issue and using the solution from @flyandi did not work for me. Webpack 5.7.0.

With main.js config it works like this:

module.exports = {
  core: {
    builder: 'webpack5',
  },
  stories: [],
  addons: ['@storybook/addon-essentials'],
  // Use the property below if you want to apply some webpack config globally
  webpackFinal: async (config, { configType }) => {
    // Make whatever fine-grained changes you need that should apply to all storybook configs
    config.module.rules.push(
      {
        test: /\.m?js/,
        resolve: {
          fullySpecified: false,
        },
      },
    );
    // Return the altered config
    return config;
  },
};

@rudyhadoux I also had this with my ng v12 upgrade and I’m also using amplify. I did a manual install of graphql to get it up to v15.5 and all the errors went away.

npm install --save graphql did the trick for me

So I think the issue lies with either graphql-tag or amplify using old deps, not with graphql itself

I confirm that it is now an issue with Angular 12, which had been upgraded to Webpack 5 and released yesterday. Angular doesn’t expose webpack.config.js by default, thus the proposed workaround is not applicable.

I have the same issue and using the solution from @flyandi did not work for me. Webpack 5.7.0.

In addition to that rule I think your resolve section also needs to look like this: resolve: { extensions: ['.wasm', '.mjs', '.js', '.jsx', '.json'] },

If using create-react-app, set up CRACO, and set your craco.config.js to:

module.exports = {
  webpack: {
    configure: (config, { env, paths }) => {
      config.module.rules.unshift({
        test: /\.m?jsx?$/,
        resolve: {
          fullySpecified: false,
        },
      });
      return config;
  },
};

Verify that this is the first rule if you have multiple (It took me some time)

{
    test: /\.m?js/,
    resolve: {
        fullySpecified: false
    }
    
}
//... rest of the rules

Where is the [rules] section? What do you mean by that? Please elaborate!

Hmm. I don’t use webpack/any build tool - just running typescript with node ES modules with the latest version of node.

Same MJS problem with Angular and AWS Amplify. @flyandi What is the file we must change please ?

It is a *.mjs files problem. https://github.com/graphql/graphql-js/issues/2721#issuecomment-723008284

I get a similar error but in graphql-ws dependency when trying to run the project as an es module

Any workaround apart from using commonjs?

I have the same issue and using the solution from @flyandi did not work for me. Webpack 5.7.0.

In addition to that rule I think your resolve section also needs to look like this: resolve: { extensions: ['.wasm', '.mjs', '.js', '.jsx', '.json'] },

This didn’t work for me either. Only thing that has worked is to add the extensions. That is, in index.mjs, I have to change from './error' to from './error/index.js'

It just bit me again. Quite a drag.

Hey, @javascriptlabs.

It seems that the error message implies the graphql import hasn’t been resolved to index.mjs, but to CommonJS build of the graphql module at node_modules/graphql/index.js:

SyntaxError: The requested module 'graphql' is expected to be of type CommonJS

I believe the issue is that while NodeJS treats your index.js as an ES module, it doesn’t resolve the graphql import to its "module": "index.mjs" file. I’m searching NodeJS docs regarding this behavior, but cannot find it any mention that it would respect the module property of the package.json of the imported (third-party) module.

The module build file will work when you bundle your index.js with tools like webpack, as they respect the module field of GraphQL’s package.json, and will include index.mjs instead of its CommonJS module.