search

graphql / graphql-js

A reference implementation of GraphQL for JavaScript
http://graphql.org/graphql-js/
MIT License
19.98k stars 2k forks source link

Compile error with webpack 4 #1272

Closed moimael closed 6 years ago

moimael commented 6 years ago

Hi,

After updating to webpack 4, compiling graphiql doesn't work because of the graphql-js dependency.

I get a bunch of those errors: 

ERROR in ./node_modules/graphql/index.mjs
2:0-49 Can't reexport the named export 'graphql' from non EcmaScript module (only default export is available)
 @ ./node_modules/graphql/index.mjs
 @ ./node_modules/graphiql/dist/components/GraphiQL.js
 @ ./node_modules/graphiql/dist/index.js
 @ ./src/client/apps/graphiql/graph-viewer/index.js
 @ ./src/client/apps/graphiql/app.js
 @ ./src/client/apps/graphiql/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server webpack-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server ./src/client/apps/graphiql

ERROR in ./node_modules/graphql/index.mjs
2:0-49 Can't reexport the named export 'graphqlSync' from non EcmaScript module (only default export is available)
 @ ./node_modules/graphql/index.mjs
 @ ./node_modules/graphiql/dist/components/GraphiQL.js
 @ ./node_modules/graphiql/dist/index.js
 @ ./src/client/apps/graphiql/graph-viewer/index.js
 @ ./src/client/apps/graphiql/app.js
 @ ./src/client/apps/graphiql/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server webpack-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server ./src/client/apps/graphiql

ERROR in ./node_modules/graphql/index.mjs
39:0-61:50 Can't reexport the named export 'DEFAULT_DEPRECATION_REASON' from non EcmaScript module (only default export is available)
 @ ./node_modules/graphql/index.mjs
 @ ./node_modules/graphiql/dist/components/GraphiQL.js
 @ ./node_modules/graphiql/dist/index.js
 @ ./src/client/apps/graphiql/graph-viewer/index.js
 @ ./src/client/apps/graphiql/app.js
 @ ./src/client/apps/graphiql/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server webpack-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server ./src/client/apps/graphiql

ERROR in ./node_modules/graphql/index.mjs
39:0-61:50 Can't reexport the named export 'GraphQLBoolean' from non EcmaScript module (only default export is available)
 @ ./node_modules/graphql/index.mjs
 @ ./node_modules/graphiql/dist/components/GraphiQL.js
 @ ./node_modules/graphiql/dist/index.js
 @ ./src/client/apps/graphiql/graph-viewer/index.js
 @ ./src/client/apps/graphiql/app.js
 @ ./src/client/apps/graphiql/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server webpack-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server ./src/client/apps/graphiql

ERROR in ./node_modules/graphql/index.mjs
39:0-61:50 Can't reexport the named export 'GraphQLDeprecatedDirective' from non EcmaScript module (only default export is available)
 @ ./node_modules/graphql/index.mjs
 @ ./node_modules/graphiql/dist/components/GraphiQL.js
 @ ./node_modules/graphiql/dist/index.js
 @ ./src/client/apps/graphiql/graph-viewer/index.js
 @ ./src/client/apps/graphiql/app.js
 @ ./src/client/apps/graphiql/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server webpack-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server ./src/client/apps/graphiql

(and a million more)

Seems like forcing the downgrade to a graphql-js version that doesn't have .mjs files fixes the issue.

jiawang1 commented 6 years ago

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

leebyron commented 6 years ago

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

Didericis commented 6 years ago

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

acoreyj commented 6 years ago

@jiawang1

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

leebyron commented 6 years ago

I'm also unable to reproduce this issue. Could you post a webpack config or a github branch showing a reproducible error? Here was my attempt to reproduce:

mkdir webpack-test
cd webpack-test
npm init -y
npm install --save graphql webpack webpack-cli
./node_modules/.bin/webpack-cli index.js

Which prints:

Hash: 6dd423e975d42a9c9e4c
Version: webpack 4.4.1
Time: 5568ms
Built at: 2018-3-29 13:57:45
  Asset     Size  Chunks             Chunk Names
main.js  143 KiB       0  [emitted]  main
Entrypoint main = main.js
   [1] ./node_modules/graphql/index.mjs + 99 modules 474 KiB {0} [built]
       |    100 modules
   [2] ./index.js 32 bytes {0} [built]
    + 1 hidden module

I then see that dist/main.js was properly produced.

leebyron commented 6 years ago

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.

frantic1048 commented 6 years ago

Same issue here, trying to intgrate GraphiQL into project, but fails on build...

webpack version: 4.4.1

amilajack commented 6 years ago

@leebyron's solution worked for me

WorldOfCode22 commented 6 years ago

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

jatsrt commented 6 years ago

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"]
amneacsu commented 6 years ago

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';
wmertens commented 5 years ago

@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'],

moonray commented 5 years ago

This "fix" proposed by jatsrt breaks a lot of things with, for example, antd library

mcmimik commented 5 years ago

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']
        }
    }
}
jamesgmarks commented 5 years ago

@mcmimik THANK YOU! I was just beginning to trudge through the Vue documentation on this and then came across your solution. Works perfectly.

JustFly1984 commented 5 years ago

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

emmanuelbuah commented 5 years ago

@JustFly1984 I have the same issue and trying to figure out how to address it.

JustFly1984 commented 5 years ago

I figure that out, check if you mix ES6 import and module.exports = in same file. That is forbidden. I had ES6 import, require and module.exports = and require had been broken. I've replaced ES6 import with another require to solve an issue.

emmanuelbuah commented 5 years ago

@JustFly1984 Not sure I understand what you meant. My config uses only ES6 import/export, not require(..). Are you saying to resolve the issue, have to replace all ES6 imports with require? If so, do you know why?

JustFly1984 commented 5 years ago

it is not about require, it is about mixing es6 import and module.exports in the same file.

JustFly1984 commented 5 years ago

I think it is either babel, either webpack, but I'm currently not sure.

pitops commented 5 years ago

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

githubflub commented 4 years ago

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.

chris commented 4 years ago

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"
          }
        );
      }
    },
dev1143 commented 3 years ago

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';

can you please tell me where do i make to do these imports iam totally new on the graph ql

lurdbinanc commented 1 year ago

Hi,

After updating to webpack 4, compiling graphiql doesn't work because of the graphql-js dependency.

I get a bunch of those errors: 


ERROR in ./node_modules/graphql/index.mjs

2:0-49 Can't reexport the named export 'graphql' from non EcmaScript module (only default export is available)

 @ ./node_modules/graphql/index.mjs

 @ ./node_modules/graphiql/dist/components/GraphiQL.js

 @ ./node_modules/graphiql/dist/index.js

 @ ./src/client/apps/graphiql/graph-viewer/index.js

 @ ./src/client/apps/graphiql/app.js

 @ ./src/client/apps/graphiql/index.js

 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server webpack-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server ./src/client/apps/graphiql

ERROR in ./node_modules/graphql/index.mjs

2:0-49 Can't reexport the named export 'graphqlSync' from non EcmaScript module (only default export is available)

 @ ./node_modules/graphql/index.mjs

 @ ./node_modules/graphiql/dist/components/GraphiQL.js

 @ ./node_modules/graphiql/dist/index.js

 @ ./src/client/apps/graphiql/graph-viewer/index.js

 @ ./src/client/apps/graphiql/app.js

 @ ./src/client/apps/graphiql/index.js

 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server webpack-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server ./src/client/apps/graphiql

ERROR in ./node_modules/graphql/index.mjs

39:0-61:50 Can't reexport the named export 'DEFAULT_DEPRECATION_REASON' from non EcmaScript module (only default export is available)

 @ ./node_modules/graphql/index.mjs

 @ ./node_modules/graphiql/dist/components/GraphiQL.js

 @ ./node_modules/graphiql/dist/index.js

 @ ./src/client/apps/graphiql/graph-viewer/index.js

 @ ./src/client/apps/graphiql/app.js

 @ ./src/client/apps/graphiql/index.js

 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server webpack-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server ./src/client/apps/graphiql

ERROR in ./node_modules/graphql/index.mjs

39:0-61:50 Can't reexport the named export 'GraphQLBoolean' from non EcmaScript module (only default export is available)

 @ ./node_modules/graphql/index.mjs

 @ ./node_modules/graphiql/dist/components/GraphiQL.js

 @ ./node_modules/graphiql/dist/index.js

 @ ./src/client/apps/graphiql/graph-viewer/index.js

 @ ./src/client/apps/graphiql/app.js

 @ ./src/client/apps/graphiql/index.js

 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server webpack-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server ./src/client/apps/graphiql

ERROR in ./node_modules/graphql/index.mjs

39:0-61:50 Can't reexport the named export 'GraphQLDeprecatedDirective' from non EcmaScript module (only default export is available)

 @ ./node_modules/graphql/index.mjs

 @ ./node_modules/graphiql/dist/components/GraphiQL.js

 @ ./node_modules/graphiql/dist/index.js

 @ ./src/client/apps/graphiql/graph-viewer/index.js

 @ ./src/client/apps/graphiql/app.js

 @ ./src/client/apps/graphiql/index.js

 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server webpack-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server ./src/client/apps/graphiql

(and a million more)

Seems like forcing the downgrade to a graphql-js version that doesn't have .mjs files fixes the issue.