Vue-cli: Mocha unit test error with graphql: Can't reexport the named export 'graphql' from non EcmaScript module

[renyuanz]

Version

3.0.0-rc.3

Reproduction link

https://github.com/renyuanz/vue-cli-graphql-mocha-issue

Steps to reproduce

• vue create graphql-bug
• Choose Unit test with Mocha
• Add graphql yarn add graphql
• Import graphql in HelloWorld.spec.js

import { expect } from 'chai'
import { shallowMount } from '@vue/test-utils'
import { graphql } from 'graphql'
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const t = graphql();
    const msg = 'new message'
    const wrapper = shallowMount(HelloWorld, {
      propsData: { msg }
    })
    expect(wrapper.text()).to.include(msg)
  })
})

What is expected?

should run correctly

What is actually happening?

Failed to compile with 164 error(s)

Error in ./node_modules/graphql/index.mjs

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

// ...

[leovanhaaren]

@renyuanz You probably are using a custom webpack extensions resolve config. Please look here on how to fix it; https://github.com/graphql/graphql-js/issues/1272

[leovanhaaren]

I just basically fixed it by configuring it like this in 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;

[renyuanz]

@leovanhaaren You are the best!! Thanks for saving my day!

I tried to config webpack by using chainWebpack but no luck.

[stevefan1999-personal]

Based on @leovanhaaren's advice, if you're using Vue CLI 3 so you have access to chainWebpack in vue.config.js, try this:

chainWebpack(config) {
  config.module // optional
    .rule('graphql')
    .test(/\.graphql$/)
    .use('graphql-tag/loader')
    .loader('graphql-tag/loader')
    .end()

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

  config.resolve.extensions
    .add('.mjs')
    .add('.gql')
    .add('.graphql')
    .end()
},

Then the mysterous GraphQL module error should be gone.