graphql-js: Compile error with webpack 4

It looks like manually supplying extensions may cause this issue - which is common for those who save their files as .jsx. If you do this, make sure that .mjs remains in the list of extensions and appears before .js.

For anyone else who stumbles into this, I found the following to solve the problem by adding to rules:

{
  test: /\.mjs$/,
  include: /node_modules/,
  type: "javascript/auto",
}

and to resolve:

extensions: [".webpack.js", ".web.js", ".mjs", ".js", ".json"]

@jatsrt I didn’t have to include that loader once I put .mjs before .js in my resolve.extensions. Mine is now extensions: ['.wasm', '.mjs', '.js', '.jsx', '.json'],

I think graphql should add “browser” field in package.json since webpack4 could resolve mjs now, any usage to graphql in browser will compiled failed.

BTW, I have change configuration of webpack add following part to force webpack ignore .mjs file, this also work. But all packages will be loaded following the “main” field in package.josn

resolve: { mainFields: [‘browser’, ‘main’, ‘module’], extensions: [‘.js’, ‘.json’, ‘.jsx’] },

Adding .mjs to the list of extensions worked (before .js and .jsx)

resolve: {
    extensions: ['.mjs', '.js', '.jsx']
}

Reference: https://github.com/graphql/graphql-js/issues/1272#issuecomment-377384574

For lazy people wanting a specific version number: downgrading to v0.13.0 fixed the issue for me.

Thanks for the report, we’ll follow up with the webpack team to understand why this isn’t working as expected.

Had the same issue, but I didn’t want to mess with webpack config. My fix was to change imports.

-import { print } from 'graphql';
+import { print } from 'graphql/language/printer';

If somebody uses chainWebpack:

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', '.gql', '.graphql']
        }
    }
}

And for anyone running into this in a Quasar app, you can add the .mjs support by adding it into quasar.config.js, in the rules pushed in the build.extendWebpack config. e.g.:

    build: {
      scopeHoisting: true,
      vueRouterMode: "hash", // available values: 'hash', 'history'
      showProgress: true,
      gzip: false,
      analyze: false,

      // https://quasar.dev/quasar-cli/cli-documentation/handling-webpack
      extendWebpack(cfg) {
        cfg.module.rules.push(
          {
            enforce: "pre",
            test: /\.(js|vue)$/,
            loader: "eslint-loader",
            exclude: /node_modules/,
            options: {
              formatter: require("eslint").CLIEngine.getFormatter("stylish")
            }
          },
          {
            test: /\.mjs$/,
            include: /node_modules/,
            type: "javascript/auto"
          }
        );
      }
    },

I started getting these warnings/errors after changing my backend’s folder structure around while trying to run serverless-offline. The fix for me was to change this line in my webpack config

externals: [ nodeExternals() ],

to

externals: [ nodeExternals({ modulesDir: path.resolve(__dirname, 'node_modules') }) ],

I did NOT have to add ‘.mjs’ to extensions or a new rule. This fix probably doesn’t apply to you if you are using a standard folder structure. I don’t even know why this worked.

I have connected issue caused by

{
  test: /\.mjs$/,
  include: /node_modules/,
  type: "javascript/auto",
}

I have 3 environments: development, staging and production. I’m using AWS mobile hub, for each env, I have separate config, which I import with

require(`./exports.${process.env.AWS_ENV}`)

The problem is that after adding the rule above to webpack config, require stops working in browser, but still working on server-side with same webpack config

adding .mjs to the list of extensions worked for me after I went back and set everything back to import {} from “graphql”

@jiawang1

Hmm I’m a bit confused could you post your webpack config?