Broken examples after #11158

fvsch commented 1 year ago

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

Go to https://stackblitz.com/edit/vitejs-example-vue-alpha-borked?file=package.json
It should run npm install && npm run dev
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

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] 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.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

fvsch commented 1 year ago

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 commented 1 year ago

Closing as this is now fixed.

xpluscal commented 1 year ago

How has this been fixed @sapphi-red ?

sapphi-red commented 1 year ago

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

xpluscal commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

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

https://github.com/oneezy/monorepo

Clone above repository
pnpm install
pnpm run dev

JosepAlacid commented 1 year ago

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

vitejs / vite