[Feature Request] "npm create vuetify" need update

[softy2k]

Problem to solve

Starting new project with cmd line : npm create vuetify, and manually selected no TypeScript, add Router, Pinia and ESLint, in package.json I have:

"devDependencies": {
  "@vitejs/plugin-vue": "^4.0.0",
  "eslint": "^8.22.0",
  "eslint-plugin-vue": "^9.3.0",
  "vite": "^4.2.0",
  "vite-plugin-vuetify": "^1.0.0"
}

Still Vite 4 , not Vite 5.
If I 'force' update to vite-plugin-vuetify@2.0.1 I receive a lot of warnings. After that, project is starting OK.

Still, on 'npm run build', I receive a warning:
The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.

Tested on Windows 10 with NodeJS v18.19.0

Proposed solution

update npm create vuetify

[softy2k]

If I add "type": "module" in file package.json, and run npm run build, I have another warning:

(node:9680) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)

Question: what is the safest way to proceed in this situation?

[Drillan767]

Interesting, I thought these warnings were related to the project I'm working on, I never thought about the possibility that it was raised by Vuetify 😅

[mdryden]

I can confirm this appears to be coming from Vuetify - I went through the same process of upgrading our project to from Vite 4 to Vite 5 and then changing package.json to type "module" and I also see the warning.

When I run with the following command:

$ NODE_DEBUG=esm npm run dev

The resulting trace indicates that the warning appears after vuetify loads importMap.json:

ESM 61692: Storing file:///path/to/project/anonymized/web/node_modules/vuetify/dist/json/importMap-labs.json (json) in ModuleLoadMap
ESM 61692: Loading JSONModule file:///path/to/project/anonymized/web/node_modules/vuetify/dist/json/importMap.json
(node:61692) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
ESM 61692: Translating CJSModule file:///path/to/project/anonymized/web/node_modules/vue/index.js

The project appears to be working fine, but I am slightly concerned to discover we are inadvertently using an experimental feature in a production app.

[softy2k]

I hope that the next version of vuetify will correct these errors...

[kevison]

Might want to fix package.json as well as part of the create process. Both NPM and PNPM create an entry in package.json:

"scripts": {
"dev": "node --no-warnings ./node_modules/.bin/vite",

trying to do: npm run dev OR pnpm dev will result in an error:
C:\Sandbox\JunkStuff\DeleteMeTestOne\node_modules.bin\vite:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\,/,g')")
^^^^^^^

SyntaxError: missing ) after argument list
at internalCompileFunction (node:internal/vm:77:18)
at wrapSafe (node:internal/modules/cjs/loader:1288:20)
at Module._compile (node:internal/modules/cjs/loader:1340:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
at Module.load (node:internal/modules/cjs/loader:1207:32)
at Module._load (node:internal/modules/cjs/loader:1023:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:135:12)
at node:internal/main/run_main_module:28:49

Node.js v20.11.0
 ELIFECYCLE  Command failed with exit code 1.

In order to get this to work I change the entry:
"scripts": {
"dev": "node --no-warnings ./node_modules/.bin/vite",

to

"scripts": {
"dev": "vite",

to get it to run.

Thanks

[softy2k]

Two versions of vuetify were released, but this problem was not solved.

The sad thing is that a beginner who uses Windows (as an operating system) and who would like to use vuetify will run into this error from the first. Basically, he will not be able to launch the project.

It's totally strange to do various maneuvers just to be able to start the project. Especially since vuejs and vuetify benefit from well-made documentation.

Most probably the vuetify team has other priorities...

[johnleider]

For whatever reason NPM isn't using the updated version, I'm looking into that. The JSON warning is fine and you can suppress it:

[johnleider]

Just published a new update. Should be working properly now.