Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Compile error with webpack 4 #1272

Closed
moimael opened this issue Mar 5, 2018 · 26 comments
Closed

Compile error with webpack 4 #1272

moimael opened this issue Mar 5, 2018 · 26 comments

Comments

@moimael
Copy link

moimael commented Mar 5, 2018

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
Copy link

jiawang1 commented Mar 7, 2018

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
Copy link
Contributor

leebyron commented Mar 9, 2018

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

@Didericis
Copy link

Didericis commented Mar 12, 2018

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

@acoreyj
Copy link

acoreyj commented Mar 19, 2018

@jiawang1

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

@leebyron
Copy link
Contributor

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
Copy link
Contributor

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
Copy link

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

webpack version: 4.4.1

@amilajack
Copy link

@leebyron's solution worked for me

@WorldOfCode22
Copy link

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

@jatsrt
Copy link

jatsrt commented Jun 1, 2018

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
Copy link

amneacsu commented Jun 12, 2018

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
Copy link

@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
Copy link

moonray commented Aug 27, 2018

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

@chris
Copy link

chris commented Jan 5, 2020

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
Copy link

dev1143 commented Jul 5, 2021

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

namjul added a commit to dendronhq/dendron that referenced this issue Nov 11, 2022
* chore: fix `dendron-plugin-views` build

This aim of this commit is to fix the build task within `dendron-plugin-views` package which currently results into the following error:

```
/home/nam/code/dendronhq/dendron/node_modules/zod-validation-error/node_modules/@swc/helpers/src/index.mjs
Can't reexport the named export '__decorate' from non EcmaScript module (only default export is available)
```

The commit 419dec7 (PR: #3762) is responsible for this by adding a dependency
which conflicts with the webpack build in `dendron-plugin-views`. That
dependency uses withing its cjs build files `@swc/helpers` which
conflicts with the import type from webpack.

The solution is to use explicitly set [`Rule.type`](https://webpack.js.org/configuration/module/#ruletype) property which was introduced in [webpack 4.0](https://github.com/webpack/webpack/releases/tag/v4.0.0):

> javascript/auto: (The default one in webpack 3) Javascript module with all module systems enabled: CommonJS, AMD, ESM
> javascript/esm handles ESM more strictly compared to javascript/auto:
>  Imported names need to exist on imported module
>  Dynamic modules (non-esm, i. e. CommonJs) can only imported via default import, everything else (including namespace import) emit errors
> In .mjs modules are javascript/esm by default

In my understanding setting the value `javascript/auto` tells webpack that it allows for `mjs` files to be not ESM strict.

This is a kind of hack and curcumvents the issue. In a proper setup `mjs` should only be handled as esm modules and nothing else.
So instead of changing how webpack sees `mjs` file we might want to
revert the change that introduced this issue.

References

- webpack/webpack#16213 (comment)

* chore(internal): setup `dendron-plugin-views` build to prefer `main` entry field

References

- webpack/webpack#6459 (comment)
- graphql/graphql-js#1272 (comment)
- apollographql/apollo-link-state#302 (comment)

* chore(internal): reverting to prevent increased bundle size

Webpacks's treeshaking is negatively impacted by telling it to prefer
`main` field instead of `module`. `module` point to esm modules which
are what webpack needs to do its [treeshaking](https://webpack.js.org/guides/tree-shaking/).

* chore(internal): pin version of `zod-validation-error`

Intead of changing ``dendron-plugin-views` webpack build config this
commits pins `zod-validation-error` to an older version within its
dependency to `@swc/helpers` does not conflict with webpack rules.
@lurdbinanc
Copy link

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.

kevinslin pushed a commit to dendronhq/dendron that referenced this issue Jun 11, 2023
* chore: fix `dendron-plugin-views` build

This aim of this commit is to fix the build task within `dendron-plugin-views` package which currently results into the following error:

```
/home/nam/code/dendronhq/dendron/node_modules/zod-validation-error/node_modules/@swc/helpers/src/index.mjs
Can't reexport the named export '__decorate' from non EcmaScript module (only default export is available)
```

The commit 419dec7 (PR: #3762) is responsible for this by adding a dependency
which conflicts with the webpack build in `dendron-plugin-views`. That
dependency uses withing its cjs build files `@swc/helpers` which
conflicts with the import type from webpack.

The solution is to use explicitly set [`Rule.type`](https://webpack.js.org/configuration/module/#ruletype) property which was introduced in [webpack 4.0](https://github.com/webpack/webpack/releases/tag/v4.0.0):

> javascript/auto: (The default one in webpack 3) Javascript module with all module systems enabled: CommonJS, AMD, ESM
> javascript/esm handles ESM more strictly compared to javascript/auto:
>  Imported names need to exist on imported module
>  Dynamic modules (non-esm, i. e. CommonJs) can only imported via default import, everything else (including namespace import) emit errors
> In .mjs modules are javascript/esm by default

In my understanding setting the value `javascript/auto` tells webpack that it allows for `mjs` files to be not ESM strict.

This is a kind of hack and curcumvents the issue. In a proper setup `mjs` should only be handled as esm modules and nothing else.
So instead of changing how webpack sees `mjs` file we might want to
revert the change that introduced this issue.

References

- webpack/webpack#16213 (comment)

* chore(internal): setup `dendron-plugin-views` build to prefer `main` entry field

References

- webpack/webpack#6459 (comment)
- graphql/graphql-js#1272 (comment)
- apollographql/apollo-link-state#302 (comment)

* chore(internal): reverting to prevent increased bundle size

Webpacks's treeshaking is negatively impacted by telling it to prefer
`main` field instead of `module`. `module` point to esm modules which
are what webpack needs to do its [treeshaking](https://webpack.js.org/guides/tree-shaking/).

* chore(internal): pin version of `zod-validation-error`

Intead of changing ``dendron-plugin-views` webpack build config this
commits pins `zod-validation-error` to an older version within its
dependency to `@swc/helpers` does not conflict with webpack rules.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests