Nuxt3 Vite support for Cypress coverage instrumentation

Question

I am building a Nuxt3 app and trying to integrate Cypress. As I'm aware Nuxt3 uses Vite instead and not babel, I was trying to instrument the project code using vite-plugin-istanbul npm package.

Here's my nuxt.config.ts after installing vite-plugin-istanbul package:

vite: {
  vue: {
    template: {
      transformAssetUrls: true
    }
  },
  plugins: [
    istanbul({
      exclude: ['node_modules', 'test/', 'coverage/'],
      extension: [ '.js', '.ts', '.vue' ],
      cypress: true
    }),
  ]
},

When I'm trying to run the server using npm run dev and visit the localhost URL, the following error is thrown at terminal:

[nuxt] [request error] [unhandled] [500] window is not defined
  at cov_1291n0zka8 (./.nuxt/dist/server/server.mjs:3623:191)  
  at $id_Sv05hbOoTf (./.nuxt/dist/server/server.mjs:3624:75)  
  at async __instantiateModule__ (./.nuxt/dist/server/server.mjs:40418:3)

It seems the plugin is instrumenting the server-side rendered code and window object isn't defined there. I need to have SSR enabled in my app and I'm not sure of how to handle this error.

Answer 1

This issue has been resolved by the plugin authors.

TLDR version

Just update the vite-plugin-istanbul package to the latest version and the issue should get resolved.

Long version

There are two parts to this error:

1. The package was originally configured to transform all the files. The plugin authors have now added a condition that checks whether the SSR has been enabled or not. This is done via options.ssr property within the transform function. Please upgrade to the latest version of vite-plugin-istanbul. The plugin no longer instruments the SSR files, hence the window object error no longer exists in there. Follow this thread if you need more details.

2. After getting this error resolved, I was still facing another issue where the code instrumentation was impacting the proper app compilation and throwing a hydration mismatch error. The plugin authors came to the rescue again and fixed this error. Please upgrade to the latest version of vite-plugin-istanbul. Follow this GitHub thread if you need more details.

The package authors are really awesome and helpful. It's great to see such people in the open source community!