[Bug Report][create-vuetify 2.0.0] yarn dev error and yarn build error
xiayu0813 opened this issue · 7 comments
Enviroment:
- Node.js: 21.5.0
- yarn: v1.22.21
- Win11: Windows Terminal and PowerShell
- create-vuetify@2.0.0
Problem
just create project: Essentials + TypeScript + yarn. Not change any source file.
√ Project name: ... vuetify-project
√ Which preset would you like to install? » Essentials (Base, Layouts, Pinia)
√ Use TypeScript? ... Yes
√ Would you like to install dependencies with yarn, npm, pnpm, or bun? » yarn
yarn dev
Error:
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:1287:20)
at Module._compile (node:internal/modules/cjs/loader:1339:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1434:10)
at Module.load (node:internal/modules/cjs/loader:1206:32)
at Module._load (node:internal/modules/cjs/loader:1022:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:142:12)
at node:internal/main/run_main_module:28:49
Node.js v21.5.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
It seems execute linux bash file ./node_modules/.bin/vite
. Similar error with "dev": "node --no-warnings ./node_modules/.bin/vite.cmd",
in package,json.
I change the dev config to "dev": "vite",
, it works with warnning.
(node:16892) 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)
yarn build
Error:
yarn run v1.22.21
$ vue-tsc --noEmit && vite build
src/router/index.ts:8:48 - error TS2307: Cannot find module 'vue-router/auto' or its corresponding type declarations.
8 import { createRouter, createWebHistory } from 'vue-router/auto'
~~~~~~~~~~~~~~~~~
src/router/index.ts:9:30 - error TS2307: Cannot find module 'virtual:generated-layouts' or its corresponding type declarations.
9 import { setupLayouts } from 'virtual:generated-layouts'
~~~~~~~~~~~~~~~~~~~~~~~~~~~
Found 2 errors in the same file, starting at: src/router/index.ts:8
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
I need manually add "types": ["vite-plugin-vue-layouts/client", "node"],
to compilerOptions
and add "*.d.ts"
to include
list in tsconfig.json file.
Question
I'm new to use vuetify and vue3, the manually change is right or not? There is a better way?
Thanks!
Same issue when using npm run dev
, but npm run build
works. Only when changing the dev script to "dev": "vite"
, as xiayu0813 said, does it work (while showing the ExperimentalWarning). It also works when not using the script as proxy, with "dev": "node --no-warnings ./node_modules/vite/bin/vite.js"
Environment
- Node: 20.10.0
- npm: 10.2.3
- create-vuetify@2.0.0
Steps to reproduce
npm create vuetify
- Accept all default values but select npm as package manager
- Run
npm run dev
npm run dev
with "dev": "node --no-warnings ./node_modules/.bin/vite"
(default)
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.10.0
with "dev": "node --no-warnings ./node_modules/.bin/vite.cmd"
@ECHO off
^
SyntaxError: Invalid or unexpected token
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.10.0
with "dev": "node --no-warnings ./node_modules/.bin/vite.ps1"
$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
^^^^^^^^^^^^^
SyntaxError: Unexpected identifier '$MyInvocation'
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.10.0
Same issue but npm run dev
works while npm run build
fails.
Env:
- node v21.4.0
- npm 10.2.4
- Win 11 + Powershell + create-vuetify
npm run build
> vuetify-project@0.0.0 build
> vue-tsc --noEmit && vite build
node_modules/@vitejs/plugin-vue/dist/index.d.ts:25:52 - error TS2344: Type '"hoistStatic" | "defineModel" | "fs" | "globalTypeFiles" | "babelParserPlugins" | "propsDestructure" | "reactivityTransform"' does not satisfy the constraint 'keyof SFCScriptCompileOptions'.
Type '"defineModel"' is not assignable to type 'keyof SFCScriptCompileOptions'.
25 script?: Partial<Pick<SFCScriptCompileOptions, 'babelParserPlugins' | 'globalTypeFiles' | 'defineModel' | 'propsDestructure' | 'fs' | 'reactivityTransform' | 'hoistStatic'>>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/vuetify/lib/components/index.d.mts:1127:18 - error TS2694: Namespace 'global.JSX' has no exported member 'Element'.
1127 }, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
~~~~~~~
node_modules/vuetify/lib/components/index.d.mts:1164:18 - error TS2694: Namespace 'global.JSX' has no exported member 'Element'.
1164 }, () => JSX.Element, {}, {}, {}, {}>;
~~~~~~~
node_modules/vuetify/lib/components/index.d.mts:1181:14 - error TS2694: Namespace 'global.JSX' has no exported member 'Element'.
1181 }, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {}, {}, string, vue.SlotsType<Partial<{
~~~~~~~
node_modules/vuetify/lib/components/index.d.mts:1212:20 - error TS2694: Namespace 'global.JSX' has no exported member 'Element'.
1212 }>>, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & Readonly<vue.ExtractPropTypes<{
~~~~~~~
node_modules/vuetify/lib/components/index.d.mts:1235:20 - error TS2694: Namespace 'global.JSX' has no exported member 'Element'.
1235 }>>, () => JSX.Element, {}, {}, {}, {}>;
~~~~~~~
node_modules/vuetify/lib/components/index.d.mts:1247:16 - error TS2694: Namespace 'global.JSX' has no exported member 'Element'.
1247 }>>, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, {}, {}, string, {}> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
~~~~~~~
node_modules/vuetify/lib/components/index.d.mts:1274:20 - error TS2694: Namespace 'global.JSX' has no exported member 'Element'.
1274 }>>, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & Readonly<vue.ExtractPropTypes<{
~~~~~~~
node_modules/vuetify/lib/components/index.d.mts:1297:20 - error TS2694: Namespace 'global.JSX' has no exported member 'Element'.
1297 }>>, () => JSX.Element, {}, {}, {}, {}>;
~~~~~~~
node_modules/vuetify/lib/components/index.d.mts:1309:16 - error TS2694: Namespace 'global.JSX' has no exported member 'Element'.
1309 }>>, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, {}, {}, string, {}> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
~~~~~~~
node_modules/vuetify/lib/components/index.d.mts:1336:20 - error TS2694: Namespace 'global.JSX' has no exported member 'Element'.
1336 }>>, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & Readonly<vue.ExtractPropTypes<{
~~~~~~~
node_modules/vuetify/lib/components/index.d.mts:1359:20 - error TS2694: Namespace 'global.JSX' has no exported member 'Element'.
1359 }>>, () => JSX.Element, {}, {}, {}, {}>;
~~~~~~~
node_modules/vuetify/lib/components/index.d.mts:1371:16 - error TS2694: Namespace 'global.JSX' has no exported member 'Element'.
1371 }>>, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, {}, {}, string, {}> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
~~~~~~~
node_modules/vuetify/lib/components/index.d.mts:2140:26 - error TS2694: Namespace 'global.JSX' has no exported member 'Element'.
2140 }, () => false | JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
~~~~~~~
node_modules/vuetify/lib/components/index.d.mts:2309:26 - error TS2694: Namespace 'global.JSX' has no exported member 'Element'.
2309 }, () => false | JSX.Element, {}, {}, {}, {
~~~~~~~
node_modules/vuetify/lib/components/index.d.mts:2388:22 - error TS2694: Namespace 'global.JSX' has no exported member 'Element'.
2388 }, () => false | JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
~~~~~~~
node_modules/vuetify/lib/components/index.d.mts:13761:26 - error TS2694: Namespace 'global.JSX' has no exported member 'Element'.
13761 }, () => false | JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
~~~~~~~
node_modules/vuetify/lib/components/index.d.mts:14024:26 - error TS2694: Namespace 'global.JSX' has no exported member 'Element'.
14024 }, () => false | JSX.Element, {}, {}, {}, {
~~~~~~~
node_modules/vuetify/lib/components/index.d.mts:14151:22 - error TS2694: Namespace 'global.JSX' has no exported member 'Element'.
14151 }, () => false | JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
~~~~~~~
node_modules/vuetify/lib/components/index.d.mts:22879:18 - error TS2694: Namespace 'global.JSX' has no exported member 'Element'.
22879 }, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
~~~~~~~
node_modules/vuetify/lib/components/index.d.mts:23001:18 - error TS2694: Namespace 'global.JSX' has no exported member 'Element'.
23001 }, () => JSX.Element, {}, {}, {}, {
~~~~~~~
node_modules/vuetify/lib/components/index.d.mts:23059:14 - error TS2694: Namespace 'global.JSX' has no exported member 'Element'.
23059 }, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
~~~~~~~
node_modules/vuetify/lib/components/index.d.mts:30955:23 - error TS2694: Namespace 'global.JSX' has no exported member 'Element'.
30955 } & {}, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<{
~~~~~~~
node_modules/vuetify/lib/components/index.d.mts:31002:23 - error TS2694: Namespace 'global.JSX' has no exported member 'Element'.
31002 } & {}, () => JSX.Element, {}, {}, {}, {
~~~~~~~
node_modules/vuetify/lib/components/index.d.mts:31023:19 - error TS2694: Namespace 'global.JSX' has no exported member 'Element'.
31023 } & {}, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<{
~~~~~~~
node_modules/vuetify/lib/components/index.d.mts:31758:18 - error TS2694: Namespace 'global.JSX' has no exported member 'Element'.
31758 }, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
~~~~~~~
node_modules/vuetify/lib/components/index.d.mts:31813:18 - error TS2694: Namespace 'global.JSX' has no exported member 'Element'.
31813 }, () => JSX.Element, {}, {}, {}, {
~~~~~~~
node_modules/vuetify/lib/components/index.d.mts:31842:14 - error TS2694: Namespace 'global.JSX' has no exported member 'Element'.
31842 }, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
~~~~~~~
node_modules/vuetify/lib/components/index.d.mts:54710:16 - error TS2694: Namespace 'global.JSX' has no exported member 'Element'.
54710 }>[] | JSX.Element | undefined, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
~~~~~~~
node_modules/vuetify/lib/components/index.d.mts:54759:16 - error TS2694: Namespace 'global.JSX' has no exported member 'Element'.
54759 }>[] | JSX.Element | undefined, {}, {}, {}, {
~~~~~~~
node_modules/vuetify/lib/components/index.d.mts:54785:12 - error TS2694: Namespace 'global.JSX' has no exported member 'Element'.
54785 }>[] | JSX.Element | undefined, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
~~~~~~~
node_modules/vuetify/lib/components/index.d.mts:58098:18 - error TS2694: Namespace 'global.JSX' has no exported member 'Element'.
58098 }, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {} & {
~~~~~~~
node_modules/vuetify/lib/components/index.d.mts:58131:18 - error TS2694: Namespace 'global.JSX' has no exported member 'Element'.
58131 }, () => JSX.Element, {}, {}, {}, {}>;
~~~~~~~
node_modules/vuetify/lib/components/index.d.mts:58146:14 - error TS2694: Namespace 'global.JSX' has no exported member 'Element'.
58146 }, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {}, {}, string, vue.SlotsType<Partial<{
~~~~~~~
Found 34 errors in 2 files.
Errors Files
1 node_modules/@vitejs/plugin-vue/dist/index.d.ts:25
33 node_modules/vuetify/lib/components/index.d.mts:1127
After i delete vue-tsc --noEmit &&
from "build": "vue-tsc --noEmit && vite build"
in package.json
project builds.
Hello
fyi, i have the same JSX.Element error when building a scaffold 1.1.1 project (tested with npm, yarn & yarn PnP)
edit: regarding 2.0.0, I'm able to use it by doing the following:
- executing
yarn dev
to create components.d.ts and typed-router.d.ts files - add "*.d.ts" to tsconfig.json
include
key to fix the following build error:
src/router/index.ts:8:48 - error TS2307: Cannot find module 'vue-router/auto' or its corresponding type declarations.
8 import { createRouter, createWebHistory } from 'vue-router/auto'
- add "vite-plugin-vue-layouts/client" to tsconfig.json compilerOptions.types key (you need to create compilerOptions.types key as list of string if it doesn't exist) to fix the following build error:
src/router/index.ts:9:30 - error TS2307: Cannot find module 'virtual:generated-layouts' or its corresponding type declarations.
9 import { setupLayouts } from 'virtual:generated-layouts'
- add "node" to tsconfig.json compilerOptions.types list key to fix the following build error or replace process.env.BASE_URL by import.meta.env.BASE_URL in src/router/index.ts:
src/router/index.ts:12:29 - error TS2591: Cannot find name 'process'. Do you need to install type definitions for node? Try `npm i --save-dev @types/node` and then add 'node' to the types field in your tsconfig.
12 history: createWebHistory(process.env.BASE_URL),
Enviroment:
- Node.js: 21.5.0
- yarn: v1.22.21
- Win11: Windows Terminal and PowerShell
- create-vuetify@2.0.0
Problem
just create project: Essentials + TypeScript + yarn. Not change any source file.
√ Project name: ... vuetify-project √ Which preset would you like to install? » Essentials (Base, Layouts, Pinia) √ Use TypeScript? ... Yes √ Would you like to install dependencies with yarn, npm, pnpm, or bun? » yarn
yarn dev
Error:
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:1287:20) at Module._compile (node:internal/modules/cjs/loader:1339:27) at Module._extensions..js (node:internal/modules/cjs/loader:1434:10) at Module.load (node:internal/modules/cjs/loader:1206:32) at Module._load (node:internal/modules/cjs/loader:1022:12) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:142:12) at node:internal/main/run_main_module:28:49 Node.js v21.5.0 error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.It seems execute linux bash file
./node_modules/.bin/vite
. Similar error with"dev": "node --no-warnings ./node_modules/.bin/vite.cmd",
in package,json.I change the dev config to
"dev": "vite",
, it works with warnning.(node:16892) 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)
yarn build
Error:
yarn run v1.22.21 $ vue-tsc --noEmit && vite build src/router/index.ts:8:48 - error TS2307: Cannot find module 'vue-router/auto' or its corresponding type declarations. 8 import { createRouter, createWebHistory } from 'vue-router/auto' ~~~~~~~~~~~~~~~~~ src/router/index.ts:9:30 - error TS2307: Cannot find module 'virtual:generated-layouts' or its corresponding type declarations. 9 import { setupLayouts } from 'virtual:generated-layouts' ~~~~~~~~~~~~~~~~~~~~~~~~~~~ Found 2 errors in the same file, starting at: src/router/index.ts:8 error Command failed with exit code 2. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
I need manually add
"types": ["vite-plugin-vue-layouts/client", "node"],
tocompilerOptions
and add"*.d.ts"
toinclude
list in tsconfig.json file.Question
I'm new to use vuetify and vue3, the manually change is right or not? There is a better way? Thanks!
just change dev property in package.json from "dev": "node --no-warnings ./node_modules/.bin/vite", to "dev": "vite",
Is there any reason this isn't being addressed? Currently using this tool is broken for any new user - yet the fix is so simple and works.
Response on their Discord was to switch to Unix environment if you want to be a "serious" programmer 🙄
resolved as part of v2.1 - 2e62807