How do I resolve the error "don't know how to turn this value into a node" for a Vue 3 app using babel-plugin-istanbul extending .vue

Question

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.

Answer 1

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']
    }]
  ],

Answer 2

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.

Answer 3

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

Answer 4

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.