[Bug Report][3.0.0-beta.1] Cannot install Vuetify 3 following docs steps

rafaellehmkuhl commented 2 years ago

Environment

Vuetify Version: 3.0.0-beta.1 Vue Version: 3.2.33 Browsers: Edge 101.0.1210.39 OS: Mac OS 10.15.7

Steps to reproduce

Try to follow instructions on this page: https://next.vuetifyjs.com/en/getting-started/installation/

npm init @vitejs/app my-beta-app -- --template vue
vue add vuetify

Expected Behavior

Vuetify to be installed

Actual Behavior

> vue add vuetify         

📦  Installing vue-cli-plugin-vuetify...

➤ YN0000: ┌ Resolution step
➤ YN0032: │ fsevents@npm:2.3.2: Implicit dependencies on node-gyp are discouraged
➤ YN0002: │ vue-cli-plugin-vuetify@npm:2.4.8 [aac39] doesn't provide webpack (p851d3), requested by null-loader
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
➤ YN0000: └ Completed in 40s 599ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ ws@npm:8.6.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ xml-name-validator@npm:4.0.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ xmlchars@npm:2.2.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yallist@npm:4.0.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yauzl@npm:2.10.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0000: └ Completed in 0s 688ms
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0007: │ cypress@npm:9.6.1 must be built because it never has been before or the last one failed
➤ YN0007: │ vue-demi@npm:0.12.5 [77051] must be built because it never has been before or the last one failed
➤ YN0007: │ esbuild@npm:0.14.39 must be built because it never has been before or the last one failed
➤ YN0000: └ Completed in 1s 700ms
➤ YN0000: Done with warnings in 43s 40ms
✔  Successfully installed plugin: vue-cli-plugin-vuetify

Plugin vue-cli-plugin-vuetify does not have a generator to invoke

This happens using any of the following project init scripts:

npm init @vitejs/app my-beta-app -- --template vue
yarn create @vitejs/app my-beta-app --template vue
npm init vue@latest
npm create vite@latest my-vue-app -- --template vue
yarn create vite my-vue-app --template vue

Reproduction Link

https://codepen.io/rafaellehmkuhl/pen/NWybpQM

MajesticPotatoe commented 2 years ago

what options did you select at prompt? just did fresh install on windows, no issue.

rafaellehmkuhl commented 2 years ago

what options did you select at prompt? just did fresh install on windows, no issue.

All except .jsx support.

I've used the script yesterday and it worked without issues. Is there something I could have done that would cause this?

MajesticPotatoe commented 2 years ago

which prompt are you selecting during vue add vuetify? i did yarn create @vitejs/app my-beta-app --template vue which doesn't provide any prompts, and then during vue add vuetify i selected Vite Preview (Vuetify 3 + Vite).

its possible with the other templates, depending on what options are selected with the initial vue package creation that there are some conflict of dependencies or something isn't getting set up correctly

rafaellehmkuhl commented 2 years ago

which prompt are you selecting during vue add vuetify? i did yarn create @vitejs/app my-beta-app --template vue which doesn't provide any prompts, and then during vue add vuetify i selected Vite Preview (Vuetify 3 + Vite).

its possible with the other templates, depending on what options are selected with the initial vue package creation that there are some conflict of dependencies or something isn't getting set up correctly

The problem is that vue add vuetify don't prompt me 😅. Instead it returns this Plugin vue-cli-plugin-vuetify does not have a generator to invoke message.

I assume the "generator" is the cli prompt that would ask me between Vuetify2, Vuetify3, etc.

rafaellehmkuhl commented 2 years ago

One thing I've just remember, and I would like to add: I'm using yarn 3.2.1, and I'm pretty sure by the time the prompt worked, I was using yarn classic.

Edit: there's clearly something to do with Yarn, and probably with it's latest version.

Following worked (vuetify-cli prompt called):

npm init vue@3
cd project_name
npm install
vue add vuetify

Following don't work (vuetify-cli prompt not called and message Plugin vue-cli-plugin-vuetify does not have a generator to invoke returned):

yarn create vue@3
cd project_name
yarn install
vue add vuetify

To make it clear,yarn --version gives me 3.2.1.

Confirmed it works properly with yarn 1.23.0.

rafaellehmkuhl commented 2 years ago

@MajesticPotatoe using yarn 1.23.0 I moved forward and begin to test other parts. One thing that also appears not to be working is the integration of Vuetify3 with Vitest. I used the Vite Preview (Vuetify3 + Vite) option, and when running the unit test with yarn test:unit I received the following:

➜  cockpit git:(initial-project-structure) ✗ yarn test:unit
yarn run v1.23.0-20220130.1630
warning package.json: No license field
warning ../../../package.json: No license field
$ vitest

 DEV  v0.9.4 /Users/rafael/Documents/project_name

 ❯ src/components/__tests__/CounterCard.spec.ts (0)

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Suites 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  src/components/__tests__/CounterCard.spec.ts [ src/components/__tests__/CounterCard.spec.ts ]
TypeError: Unknown file extension ".css" for /Users/rafael/project_name/node_modules/vuetify/lib/components/VBtn/VBtn.css
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

Test Files  1 failed (1)
     Tests  no tests
      Time  705ms (in thread 0ms, Infinity%)

 FAIL  Tests failed. Watching for file changes...
       press h to show help, press q to quit

In this case, the CounterCard component is a bare component with a <v-btn>, but the problem ("unknown file extension '.css'") happens when using any Vuetify component.

Edit: solution for this error can be found here.

vuetifyjs / vuetify