Broken examples after #11158

[fvsch]

Describe the bug

PR #11158 updated a few example's package.json to use alpha versions of some Vite plugins. This breaks the vue and vue-ts examples linked at:
https://vitejs.dev/guide/#trying-vite-online

$ vite
failed to load config from /home/projects/vitejs-vite-lrnemy/vite.config.js
error when starting dev server:
file:///home/projects/vitejs-vite-lrnemy/node_modules/@vitejs/plugin-vue/dist/index.mjs:2
import { isCSSRequest, normalizePath as normalizePath$1, transformWithEsbuild, formatPostcssSourceMap, createFilter } from 'vite';
         ^^^^^^^^^^^^
SyntaxError: The requested module 'vite' does not provide an export named 'isCSSRequest'
    at _instantiate (https://vitejsvitelrnemy-o15z.w-corp.staticblitz.com/blitz.b6c96f782a49b3e017dca41830943768f8acbe40.js:6:986481)

I tried a few different versions of @vitejs/plugin-vue:

• 3.2.0 -> works
• 4.0.0-alpha.0 -> error
• 4.0.0-alpha.2 -> error

Reproduction

https://stackblitz.com/edit/vitejs-example-vue-alpha-borked?file=package.json

Steps to reproduce

1. Go to https://stackblitz.com/edit/vitejs-example-vue-alpha-borked?file=package.json
2. It should run npm install && npm run dev
3. It should end up with an error where the Vue plugin cannot import isCSSRequest from 'vite'.

System Info

I can reproduce the issue locally on macOS as well.

  System:
    OS: macOS 13.0.1
    CPU: (8) arm64 Apple M1
    Memory: 58.41 MB / 8.00 GB
    Shell: 3.5.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 18.12.1 - /opt/homebrew/opt/node@18/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.19.2 - /Volumes/Pieces/.npm/bin/npm
  Browsers:
    Chrome: 108.0.5359.71
    Firefox Nightly: 109.0a1
    Safari: 16.1
  npmPackages:
    @vitejs/plugin-vue: ^4.0.0-alpha.2 => 4.0.0-alpha.2
    vite: ^3.2.4 => 3.2.4

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[fvsch]

Other alpha plugins like @vitejs/plugin-react@3.0.0-alpha.2 seem to work with Vite 3.2.4. So it might be specific to the Vue plugin.

[sapphi-red]

Closing as this is now fixed.

[xpluscal]

How has this been fixed @sapphi-red ?

[sapphi-red]

It now uses the stable versions.
https://github.com/vitejs/vite/blob/main/packages/create-vite/template-vue/package.json

[xpluscal]

@sapphi-red you're saying the stable version of vite? I'm currently experiencing this error only using yarn and on vite 3.2.5

[sapphi-red]

I don't get what you mean. plugin-vue 4.0.0 works with Vite 4.0.0. It doesn't work with Vite 3.x as specified by peerDeps.

[venom90]

I'm getting this error when using pnpm install for turbo repo + sveltekit + tailwind

https://github.com/oneezy/monorepo

1. Clone above repository
2. pnpm install
3. pnpm run dev

[JosepAlacid]

This is the biggest pitty coding with compound js frameworks. Any update will cost you time, money and mental health.
Any post in issues is cross answered from one dependecy to another, everyone blaming the other part:

I'm getting this error when using pnpm install for turbo repo + sveltekit + tailwind

https://github.com/oneezy/monorepo

1. Clone above repository

2. pnpm install

3. pnpm run dev