Compatibility issue between cli-plugin-cypress and cli-plugin-babel

[salvadordiaz]

Version

3.0.3

Reproduction link

https://github.com/salvadordiaz/vue-cli-cypress-babel-import-bug

Node and OS info

Node 10.10.0 / yarn 1.9.4 / Ubuntu 18.04.1

Steps to reproduce

• Create project with vue create and select only babel and e2e tests with cypress
• Add an import statement to tests/e2e/specs/test.js (for example: import Vue from 'vue')
• Run e2e tests with yarn test:e2e --headless

What is expected?

Test should pass

What is actually happening?

Test fails with the following output

  Running: test.js...                                                                      (1 of 1) 

Oops...we found an error preparing this test file:

  ~/work/cypress-import-bug/tests/e2e/specs/test.js

The error was:


~/work/cypress-import-bug/node_modules/@babel/runtime/helpers/builtin/es6/interopRequireDefault.js:1
export default function _interopRequireDefault(obj) {
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

This occurred while Cypress was compiling and bundling your test code. This is usually caused by:

- A missing file or dependency
- A syntax error in the file or one of its dependencies

Fix the error in your code and re-run your tests.

---

The issue can be worked around by not using cli-plugin-cypress:

• In the project created precedently, remove @vue/cli-plugin-e2e-cypress from devDependencies in package.json
• Add cypress 3.0.3 (3.1.0 exhibits the same bug)
• Copy-paste https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-plugin-e2e-cypress/index.js to the root of your project, renaming it vue-cli-plugin-e2e-cypress.js
• Declare the local plugin created above in package.json by adding "vuePlugins": { "service": ["vue-cli-plugin-e2e-cypress.js"] }
• The test passes now (this workaround can be found in the branch workaround of the minimal reproduction repo)

It seems that cypress 3.1.0 introduces some changes that make it incompatible with the babel version used in cli-plugin-babel.

[coun7zero]

Same here. Here is the reference to my previous comment: #2347 (comment) and first appearance described by @AlexandreBonaventure: #2347 (comment)

[codeams]

As @salvadordiaz mentioned, it seems to be an incompatibility introduced by cypress 3.1.0.

I forced the @vue/cli-plugin-e2e-cypress to use 3.0.3 and it worked properly.

If you'd like to do the same just add the following to your app's package.json:

"resolutions": {
  "cypress": "3.0.3"
}

and run yarn install.

[dobromir-hristov]

They switched to babel 7 on their babelify setup, that might cause it. I am getting these errors with vue-cli v2 ;)
EDIT:
Check this tweet, might help - https://twitter.com/d_m_hristov/status/1042766423574171649

[petr001]

Hi,
I have still this issue. Why is it closed?

[dobromir-hristov]

Because it was potentially fixed by switching to webpack as a cypress preprocessor.

[petr001]

OK, thanks, @codeams workaround works for me, but would be better to be working out of box :)

[bdiz]

I'm using npm so the resolutions fix isn't an option. Manually I've done 'npm install cypress@3.0.3' but that didn't actually fix the issue for me. Still stuck as of now.

I don't understand @dobromir-hristov #2538 (comment). I thought vue-cli 3 came with webpack as cypress preprocessor by default?

[haoqunjiang]

@bdiz considering this preprocessor brings more trouble than it's worth, we later removed it from the default scaffolding process. #2904
If your project was generated between CLI v3.0.3 and v3.2.0, you can manually remove it from the file tests/e2e/plugins/index.js.

[timwis]

I just added the cypress plugin today and I'm still getting the ParseError about 'import' and 'export'. My plugins/index.js has the webpack preprocessor bits commented out. Should I be doing something else?