Vue-Warning: Cypress 10 with vue 3.2 and webpack 5.73 - CompilerOptions-Warning

Current behavior

If i mount a vue-3-component

// support/component.js
import { mount } from 'cypress/vue'; 
...
// cypress/component/my-component.cy.js
import myComponent from '@/My-Component.vue';
...
cy.mount(myComponent);

I get a vue-warning:

warn("[Vue warn]: The compilerOptions config option is only respected when using a build of Vue.js that includes the runtime compiler (aka "full build"). Since you are using the runtime-only build, compilerOptions must be passed to @vue/compiler-dom in the build setup instead.\n- For vue-loader: pass it via vue-loader's compilerOptions loader option.\n- For vue-cli: see https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-loader\n- For vite: pass it via @vitejs/plugin-vue options. See https://github.com/vitejs/vite/tree/main/packages/plugin-vue#example-for-passing-options-to-vuecompiler-dom")

I have researched on this in the code and found out that it happens when mounting the app in cypress-vue

// cypress-vue.esm-bundler.js
function mount$1(inputComponent, options) {
...
// create the app
...
// AppConfig
...
app.config[k] = v; // <-- here it fails cause accessing app.config.compilerOptions

[namespace-github]

@namespace-github I have seen this warning sometimes in the past but I am not able to recreate it currently. Can you confirm what version of Cypress you are using? And please try 10.1.0 if you are not already on it.

@marktnoonan: Important to get the Error is to “cy.stub” window.console like below. With that we want to fail every test when the console throws a warning

// cypress/support/commands.js
import { mount } from 'cypress/vue';

Cypress.Commands.add('mount', mount);


// cypress/component/my-component.cy.js
import { registerHooks } from '../utils.js';
import myComponent from '@/My-Component.vue';
...
registerHooks(cy);
...
cy.mount(myComponent);


// cypress/utils.js
beforeEach(() => cy.window().then(window =>
{
  cy.stub(window.console, 'warn', warning =>
  {
    throw new Error(warning);
  });
}));

Here are an excerpt from my package.json with all installed exact versions. I still get the Warning

  "devDependencies": {
    "@babel/core": "7.18.5",
    "@babel/preset-env": "7.18.2",
    "@cypress/code-coverage": "3.10.0",
    "babel-loader": "8.2.5",
    "babel-plugin-istanbul": "6.1.1",
    "clean-webpack-plugin": "4.0.0",
    "copy-webpack-plugin": "11.0.0",
    "css-loader": "6.7.1",
    "cypress": "10.1.0",
    "eslint": "8.17.0",
    "eslint-config-airbnb-base": "15.0.0",
    "eslint-plugin-cypress": "2.12.1",
    "eslint-plugin-import": "2.26.0",
    "eslint-plugin-quasar": "1.1.0",
    "eslint-plugin-vue": "9.1.1",
    "eslint-webpack-plugin": "3.1.1",
    "html-webpack-plugin": "5.5.0",
    "mini-css-extract-plugin": "2.6.0",
    "process": "0.11.10",
    "sass": "1.52.3",
    "sass-loader": "13.0.0",
    "start-server-and-test": "1.14.0",
    "style-loader": "3.3.1",
    "vue-loader": "17.0.0",
    "webpack": "5.73.0",
    "webpack-bundle-analyzer": "4.5.0",
    "webpack-cli": "4.10.0",
    "webpack-dev-server": "4.9.2"
  },
  "dependencies": {
    "buffer": "6.0.3",
    "core-js": "3.22.8",
    "dotenv": "16.0.1",
    "flat": "5.0.2",
    "lodash": "4.17.21",
    "moment": "2.29.3",
    "vue": "3.2.37",
    "vue-router": "4.0.16",
    "vuex": "4.0.2",
    "vuex-map-fields": "1.4.1",
    "vuex-persist": "3.1.3",
  },

[marktnoonan]

Confirmed this can be found to be logged even our own tests, like packages/launchpad/src/setup/OpenBrowserList.cy.tsx, so this is good to go for the team to pick up.

It looks like we can avoid this by not using the runtime-only build (https://vuejs.org/guide/scaling-up/tooling.html#project-scaffolding) or by changing how we pass compilerOptions.