ng6 - Can't reexport the named export 'graphql' from non EcmaScript module

[DmitryEfimenko]

Versions

Angular CLI: 6.0.0
Node: 9.8.0
OS: win32 x64
Angular: 6.0.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, http, language-service, platform-browser
... platform-browser-dynamic, router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.0
@angular-devkit/build-angular     0.6.0
@angular-devkit/build-optimizer   0.6.0
@angular-devkit/core              0.6.0
@angular-devkit/schematics        0.6.0
@angular/flex-layout              5.0.0-beta.14
@angular/pwa                      0.6.0
@ngtools/webpack                  6.0.0
@schematics/angular               0.6.0
@schematics/update                0.6.0
rxjs                              6.1.0
typescript                        2.7.2
webpack                           4.6.0

Repro steps

• ng new fresh
• cd fresh
• npm i graphql@latest
• add the following to the app.module.ts:

import { graphql } from 'graphql';
...
export class AppModule {
  constructor() {
    // it does not matter what it is below as long as we're using something from `graphql`
    const t = graphql();
  }
}

• npm start

Observed behavior

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)
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)
...
// continues reporting the same error for all .mjs files

Desired behavior

Build should work

Mention any other details that might be useful (optional)

I don't know much about .mjs, but it appears it might be used instead of .js in some cases: http://2ality.com/2017/05/es-module-specifiers.html

It appears this might be an issue of Webpack 4 configuration. See this for details.

[amitport]

For real world applications using graphql, this is a critical regression.

Tried a few workarounds- forking and optimistically editing @angular-devkit; using fileReplacements for graphql.mjs; specifying exact imports (from 'graphql -> from 'graphql/utilities/index.js').

None worked. This is the only issue blocking Angular@6 migration for us

[amitport]

@elmoGrummelig
fixed for me by angular/devkit@ddf7edd
(need to wait for the tests to pass and a release of @angular-devkit/build-angular)

[PowerKiKi]

I upgraded to the freshly released @angular-devkit/build-angular 6.0.2 and graphql 0.13.2. It now compile fine, but running tests will fail. Karma will open Chrome with the Karma page, but nothing happens at all. When clicking on the "DEBUG" button, it will open a new tab and after a short while the following error will appear in Chrome console:

Uncaught ReferenceError: require is not defined
    at Object../node_modules/graphql/jsutils/instanceOf.mjs (_karma_webpack_/vendor.js:147419)
    at __webpack_require__ (_karma_webpack_/webpack:/webpack/bootstrap:76)
    at Object../node_modules/graphql/type/definition.mjs (_karma_webpack_/vendor.js:151430)
    at __webpack_require__ (_karma_webpack_/webpack:/webpack/bootstrap:76)
    at Object../node_modules/graphql/type/validate.mjs (_karma_webpack_/vendor.js:153476)
    at __webpack_require__ (_karma_webpack_/webpack:/webpack/bootstrap:76)
    at Object../node_modules/graphql/graphql.mjs (_karma_webpack_/vendor.js:146834)
    at __webpack_require__ (_karma_webpack_/webpack:/webpack/bootstrap:76)
    at Object../node_modules/graphql/index.mjs (_karma_webpack_/vendor.js:146954)
    at __webpack_require__ (_karma_webpack_/webpack:/webpack/bootstrap:76)
./node_modules/graphql/jsutils/instanceOf.mjs @ _karma_webpack_/vendor.js:147419
__webpack_require__ @ _karma_webpack_/main.js:77
./node_modules/graphql/type/definition.mjs @ _karma_webpack_/vendor.js:151430
__webpack_require__ @ _karma_webpack_/main.js:77
./node_modules/graphql/type/validate.mjs @ _karma_webpack_/vendor.js:153476
__webpack_require__ @ _karma_webpack_/main.js:77
./node_modules/graphql/graphql.mjs @ _karma_webpack_/vendor.js:146834
__webpack_require__ @ _karma_webpack_/main.js:77
./node_modules/graphql/index.mjs @ _karma_webpack_/vendor.js:146954
__webpack_require__ @ _karma_webpack_/main.js:77
./node_modules/apollo-link-schema/lib/schemaLink.js @ _karma_webpack_/vendor.js:138024
__webpack_require__ @ _karma_webpack_/main.js:77
./node_modules/apollo-link-schema/lib/index.js @ _karma_webpack_/vendor.js:138005
__webpack_require__ @ _karma_webpack_/main.js:77
./src/app/shared/testing/MockApolloProvider.ts @ _karma_webpack_/main.js:165373
__webpack_require__ @ _karma_webpack_/main.js:77
./src/app/actions/services/action.service.spec.ts @ _karma_webpack_/main.js:150776
__webpack_require__ @ _karma_webpack_/main.js:77
webpackContext @ _karma_webpack_/main.js:150478
./src/test.ts @ _karma_webpack_/main.js:166801
__webpack_require__ @ _karma_webpack_/main.js:77
checkDeferredModules @ _karma_webpack_/main.js:44
./Data/tmp/schema/index.ts.Object.defineProperty.value @ _karma_webpack_/main.js:135
(anonymous) @ _karma_webpack_/main.js:138

So it seems it is quite solved yet. Downgrading back graphql with yarn add [email protected] (but keeping @angular-devkit/build-angular 6.0.2, will make tests pass.

[amitport]

Should work when next version after [email protected] is released (at least for me) (next version planned is [email protected] which seems to be a big release that will take some time)--you can also install unreleased version https://github.com/graphql/graphql-js#want-to-ride-the-bleeding-edge.

see graphql/graphql-js#1344 (comment)

@PowerKiKi you need @angular-devkit/[email protected] on the angular side

[amitport]

Works with [email protected] and @angular-devkit/[email protected]. Issue can be closed IMO. @DmitryEfimenko

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}