Compile error with webpack 4

[moimael]

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]

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]

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

[Didericis]

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

[acoreyj]

@jiawang1

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

[leebyron]

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]

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]

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

webpack version: 4.4.1

[amilajack]

@leebyron's solution worked for me

[WorldOfCode22]

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

[jatsrt]

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"]