1

My ultimate goal is to get e2e and unit code coverage for my Vue 3 app using Cypress in my CI/CD pipelines.

However, when using the following configuration in my babel.config.js I get a flood of repeated error messages that read don't know how to turn this value into a node at transformFile.next (<anonymous>) for each Vue file in my app that uses <script setup>.

babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
  ],
  plugins: [
    ['babel-plugin-istanbul', {
      extension: ['.js', '.vue']
    }]
  ],
};

package.json

  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.15",
    "@vue/cli-plugin-eslint": "~4.5.15",
    "@vue/cli-service": "~4.5.15",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "babel-plugin-istanbul": "^6.1.1",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0"
  },

App.vue

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

My concern is that the plugin doesn't know how to handle Vue 3's script setup syntax. Sadly, the only how-to guides I can find online are for Vue 2 or React apps.

https://docs.cypress.io/guides/tooling/code-coverage#Using-NYC

https://vuejsdevelopers.com/2020/07/20/code-coverage-vue-cypress/

So my question is: what can I do to get my app to transpile while using babel-plugin-istanbul and script setup?

Steps to Reproduce:

  1. Create a new Vue 3 app with vue-cli-service
  2. Install babel-plugin-istanbul in your dev dependencies
  3. Configure your babel.config.js as shown above
  4. Convert your App.vue to use <script setup>
  5. Run npm run serve

Expected behavior: The app transpiles with no errors

Actual behavior: Transpilation failure with don't know how to turn this value into a node errors for App.vue.

Stephen Carico
  • 83
  • 1
  • 8

4 Answers4

2

The resolve is to use istanbul in the babel config (as given in Cypress docs).

The cause isn't apparent, without <script setup> the full name babel-plugin-istanbul works ok.

  plugins: [
    ['istanbul', {
      extension: ['.js', '.vue']
    }]
  ],
Fody
  • 23,754
  • 3
  • 20
  • 37
  • Gave this a shot, but it still fails to transpile and pumps out the same errors. – Stephen Carico May 05 '22 at 17:15
  • It worked when I tested it. What do you have in the project that's not shown above? Or is there a repo? – Fody May 05 '22 at 21:17
  • Using a brand new Vue 3 app. Only alteration I made was with App.vue, which I just added above to the question. However, these errors only happen after a fresh install of the node_modules. So if I were to kill the app and reboot it with `npm run serve` the errors disappear. This is fine for local development, but I need to get this working in CI/CD without having to anticipate an initial failure since node_modules are always freshly installed in a pipeline. – Stephen Carico May 06 '22 at 02:04
  • I also used a fresh Vue 3, and didn't get the error, at least not with `plugins: [ ['istanbul', ...` – Fody May 06 '22 at 02:52
  • The only material difference, the CLI gave me `"@vue/cli-service": "~4.5.12",` (plus same ver for plugins). That may be due to my global being slightly out of date. – Fody May 06 '22 at 02:53
  • Recorded a loom video to better show what I'm experiencing on my end: https://www.loom.com/share/d6e6707bba63430384172b97368d40bf – Stephen Carico May 06 '22 at 15:18
0

I am solving same problem and I can point out two things:

  1. The problem is in babel.config.js file especially with .vue extension, when you remove it works, but for me it instrument all files.
  2. I have a feeling another problem is with CLI versions plugins. I don't have problem to run the cypress code coverage plugin with older packages.
Tyler2P
  • 2,324
  • 26
  • 22
  • 31
T J
  • 1
0

If add extension:['.vue'] in bable.config.js configuration, getting below error.

src/pages/somefile.vue?vue&type=script&setup=true&lang=js Module build failed (from ./node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js): Error: src/pages/somefile.vue: don't know how to turn this value into a node

Selvaraj S
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 04 '22 at 04:18
  • If you have a new question, please ask it by clicking the [Ask Question](https://stackoverflow.com/questions/ask) button. Include a link to this question if it helps provide context. - [From Review](/review/late-answers/33309326) – ruud Dec 06 '22 at 08:49
0

I ran into this as well. It turned out to be a bug in the istanbul-lib-instrument package, which was fixed in this PR: https://github.com/istanbuljs/istanbuljs/pull/662

If you upgrade your installed copy of istanbul-lib-instrument to 5.2.1 (i.e., npm update istanbul-lib-instrument) the issue should go away.

UnknownDeveloper
  • 445
  • 1
  • 4
  • 10