Devtools extension in cypress component-tests says: "production mode / disabled"

[NiklasBeierl]

Synopsis

Vue.js devtools seem to detect vue but not allow inspection in a cypress-controlled chromium. Please don't derail the discussion to the external vue-devtools. To my understanding, sacrificing the ergonomics of having all devtools in one window shouldn't be necessary. Vue devtools work just fine viewing the entire application from the vite devserver.

I am making this a discussion instead of a bug report because I wouldn't know how to create a reproduction for this - which is required - and because it sits at the intersection with other tooling (cypress). I would be very glad about hints how to create a good repro of this and peoples experiences with a similar setup.

Versions:

├── @testing-library/[email protected]
├── @typescript-eslint/[email protected]
├── @vitejs/[email protected]
├── @vitejs/[email protected]
├── @vue/[email protected]
├── @vueuse/[email protected]
├── [email protected]
├── [email protected]
└── [email protected]

Vue devtools: 6.6.3 and 7.0.0 beta 6
Chromium: 128.0.6613.36

Expected

I installed vue-devtools (current and beta) in a chromium embedded in cypress. I would expect to be able to inspect vue components rendered for component-tests.

Actual

As soon as a test is started, clicking the extension says:

Vue.js is detected on this page.
Devtools inspection is not available because it's in production mode or explicitly disabled by the author.

What I tried

None of these produced the desired outcome with either the current or beta versions of vue-devtools.

Setting __VUE_PROD_DEVTOOLS__ = true

See my cypress.config.ts below. Interestingly, if i evaluate window.__VUE_PROD_DEVTOOLS__ in the iframe that is used to render components for tests, i get true. So this might be considered a regression from: #353 ?

import { defineConfig } from "cypress";
import viteConfig from "./vite.config";

export default defineConfig({
  component: {
    devServer: {
      framework: "vue",
      bundler: "vite",
      viteConfig: {
        ...viteConfig,
        define: {
          ...(viteConfig.define || {}),
          __VUE_PROD_DEVTOOLS__: true,
        },
      },
    },
  },
});

Vue.config.devtools = true

As far as I understand, this is deprecated, but I tried anyways...

// in my test.cy.tsx
import Vue from "vue";
beforeEach(() => {
   Vue.config.devtools = true;
});

The "Vue force dev" extension

Didn't enable the devtools either.

Related Issues

Iframe-Support was discussed in #353 and considered implemented, so I am very supprised this doesn't work.

There is this issue on the cypress repo, which discusses this problem from cypresses side, but that was also before the devtools implemened iframe support.

[NiklasBeierl]

I am not sure this is relevant, but I am also getting this warning in cypress, DESPITE configuring these defines in my vite.config.ts.

Feature flags __VUE_OPTIONS_API__, __VUE_PROD_DEVTOOLS__ are not explicitly defined. You are running the esm-bundler 
build of Vue, which expects these compile-time feature flags to be globally injected via the bundler config in order to get better 
tree-shaking in the production bundle.

For more details, see https://link.vuejs.org/feature-flags.

What makes me suspicious is that this warning is absent when opening my app from the normal vite dev server.