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"], 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!

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

vuetifyjs / create

[Bug Report][create-vuetify 2.0.0] yarn dev error and yarn build error #35

Enviroment:

Problem

`yarn dev`

`yarn build`

Question

Environment

Steps to reproduce

npm run dev

Env:

npm run build

Enviroment:

Problem

`yarn dev`

`yarn build`

Question