Can't reexport the named export from non EcmaScript module (only default export is available)

[frederikhors]

I'm trying vue.js and vue-cli (which uses webpack 4 I think).

I'm adding "apollo-link-state": "0.4.2" to the project and when I import something like this:

import { withClientState } from 'apollo-link-state'

and start with npm run serve I'm having hundreds of errors like below:

ERROR  Failed to compile with 175 errors
error  in ./node_modules/graphql/index.mjs
Can't reexport the named export 'BREAK' from non EcmaScript module (only default export is available)
error  in ./node_modules/graphql/index.mjs
Can't reexport the named export 'BreakingChangeType' from non EcmaScript module (only default export is available)
error  in ./node_modules/graphql/index.mjs
Can't reexport the named export 'DEFAULT_DEPRECATION_REASON' from non EcmaScript module (only default export is available)
error  in ./node_modules/graphql/index.mjs
Can't reexport the named export 'DangerousChangeType' from non EcmaScript module (only default export is available)
error  in ./node_modules/graphql/index.mjs
Can't reexport the named export 'DirectiveLocation' from non EcmaScript module (only default export is available)
error  in ./node_modules/graphql/index.mjs
Can't reexport the named export 'FieldsOnCorrectTypeRule' from non EcmaScript module (only default export is available)
error  in ./node_modules/graphql/index.mjs
Can't reexport the named export 'FragmentsOnCompositeTypesRule' from non EcmaScript module (only default export is available)
error  in ./node_modules/graphql/index.mjs
...

If I switch to 0.4.1 everything works as expected.

Are you already aware of it?

Maybe related to these:

• apollo-link-state": "0.4.2" and big javascript types/graphql in final bundle. #301
• 0.4.2 increased bundle size by 26 KB #298

[sneko]

Up?

[smolinari]

I just ran into this issue too. Using 0.4.1 fixed it.

Scott

[romucci]

I am running into this problem as well, not even using 0.4.1 fixed it!

[smolinari]

@peggyrayzis - Can you have a look at this please? I want to write an article about using apollo-link-state, but I don't want to have to tell everyone they can't use the latest version. That would be sort of ridiculous.

Scott

[TimMikeladze]

Perhaps adding the following to your webpack config can help graphql/graphql-js#1272 (comment)

[romucci]

Yep.!

Just add this to vue.config.js!

const config = {
 configureWebpack: {
   resolve: {
     // .mjs needed for https://github.com/graphql/graphql-js/issues/1272
     extensions: ['*', '.mjs', '.js', '.vue', '.json', '.gql', '.graphql']
   },
   module: {
     rules: [ // fixes https://github.com/graphql/graphql-js/issues/1272
       {
         test: /\.mjs$/,
         include: /node_modules/,
         type: 'javascript/auto'
       }
     ]
   }
 }
}

module.exports = config

[smolinari]

@romucci @TimMikeladze - Thanks. That solution fixed it for me too.

Is this "the" fix? Or is does the Apollo team still need to look at this?

Scott

[romucci]

@romucci @TimMikeladze - Thanks. That solution fixed it for me too.

Is this "the" fix? Or is does the Apollo team still need to look at this?

Scott

It shouldn't be THE fix.

[smolinari]

That's what I thought, but wasn't certain. Appreciate the help!

Scott

[angelomichel]

edit: it is resolved now (the order of the extensions seemed to be important too, mine are also first "mjs" now)

[blocka]

Using vue-cli 3:
this helped for me

    config.module
      .rule('mjs')
      .test(/\.mjs$/)
      .type('javascript/auto')
      .end()

[iamonuwa]

Yep.!

Just add this to vue.config.js!

const config = {
 configureWebpack: {
   resolve: {
     // .mjs needed for https://github.com/graphql/graphql-js/issues/1272
     extensions: ['*', '.mjs', '.js', '.vue', '.json', '.gql', '.graphql']
   },
   module: {
     rules: [ // fixes https://github.com/graphql/graphql-js/issues/1272
       {
         test: /\.mjs$/,
         include: /node_modules/,
         type: 'javascript/auto'
       }
     ]
   }
 }
}

module.exports = config

This is the solution @romucci thank you

[iamonuwa]

Using vue-cli 3:
this helped for me

    config.module
      .rule('mjs')
      .test(/\.mjs$/)
      .type('javascript/auto')
      .end()

Could do it. But requires the node_modules directory