Skip to content

fix(vue): run devtools plugins only in the client environment - #17515

Open
barry166 wants to merge 1 commit into
withastro:mainfrom
barry166:barry/vue-devtools-client-env-17494
Open

fix(vue): run devtools plugins only in the client environment#17515
barry166 wants to merge 1 commit into
withastro:mainfrom
barry166:barry/vue-devtools-client-env-17494

Conversation

@barry166

Copy link
Copy Markdown

Changes

Fixes #17494.

  • Restricts the plugins returned by vite-plugin-vue-devtools to Vite's client environment.
  • Keeps the browser devtools overlay and inspector available while preventing their styled Vue module from being transformed during Astro SSR, where Vite 8 has not initialized the CSS modules cache yet.
  • Adds a dev-server regression test with vue({ devtools: true }) enabled.
  • Adds a patch changeset for @astrojs/vue.

Testing

  • pnpm -C packages/integrations/vue build
  • pnpm -C packages/integrations/vue test (24 passing)
  • pnpm exec biome check packages/integrations/vue/src/index.ts packages/integrations/vue/test/basics.test.ts packages/integrations/vue/test/fixtures/basics/astro.config.mjs

The new test fails on main with Vite 8's Cannot read properties of undefined (reading 'get') CSS transform error and passes with this change.

Docs

No documentation update is needed; this restores the existing devtools: true behavior.

Vite 8 processes Astro SSR modules before the client CSS cache is initialized. Confining Vue devtools plugins to the client environment preserves their browser behavior while keeping their styled overlay out of SSR.

Constraint: Vite 8 dev environments initialize CSS state per environment
Rejected: Disable Vue devtools entirely | removes a supported development feature
Confidence: high
Scope-risk: narrow
Directive: Keep browser-only devtools plugins out of Astro SSR environments
Tested: @astrojs/vue build; 24 integration tests; Biome; diff check
Not-tested: Browser interaction with the devtools overlay
@changeset-bot

changeset-bot Bot commented Jul 26, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 38b6702

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 29 packages
Name Type
@astrojs/vue Patch
@e2e/astro-envs Patch
@test/astro-cloudflare Patch
@e2e/errors Patch
@e2e/view-transitions Patch
@e2e/vue-component Patch
@test/0-css Patch
@test/astro-children Patch
@test/astro-envs Patch
@test/astro-slots-nested Patch
@test/react-container Patch
@test/css-pure-chunk-query-params Patch
@test/fetch Patch
@test/postcss Patch
@test/slots-vue Patch
@test/ssr-renderers-static-vue Patch
@test/vue-component Patch
@test/vue-with-multi-renderer Patch
@test/astro-cloudflare-vite-plugin Patch
@test/astro-cloudflare-with-vue Patch
@test/react-component Patch
@test/vue-app-entrypoint-async Patch
@test/vue-app-entrypoint-css Patch
@test/vue-app-entrypoint-no-export-default Patch
@test/vue-app-entrypoint-relative Patch
@test/vue-app-entrypoint-src-absolute Patch
@test/vue-app-entrypoint Patch
@test/vue-basics Patch
vue-prop-types Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions github-actions Bot added pkg: vue Related to Vue (scope) pkg: integration Related to any renderer integration (scope) labels Jul 26, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

pkg: integration Related to any renderer integration (scope) pkg: vue Related to Vue (scope)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

astro dev crashes with "Cannot read properties of undefined (reading 'get')" when Vue devtools enabled with Vite 8

1 participant