Describe the bug

now: npx degit antfu/vitesse-lite my-vitesse-app
should: npx degit antfu-collective/vitesse-lite my-vitesse-app

Reproduction

Reproduction

System Info

Windows

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

Contributions

• I am willing to submit a PR to fix this issue
• I am willing to submit a PR with failing tests (actually just go ahead and do it, thanks!)

PLEASE READ: I originally made this template for myself to mocking up apps quicker. I am glad to see you are willing to give it a try! Before your open the issue, please make sure you are reporting bugs in the template itself. I am NOT creating this template to solve the problems you faced in your project, please use Vue or Vite's discord server to ask questions. Thank you.

Describe the bug/issue

I cloned this git ran npm i to install node modules ran npm run dev and i get an error. Any ideas?

The default interactive shell is now zsh.
To update your account to use zsh, please run chsh -s /bin/zsh.
For more details, please visit https://support.apple.com/kb/HT208050.
Traviss-MacBook-Pro:vitesse-lite travisklein$ npm run dev

@ dev /Users/travisklein/Dropbox/vueApps/test/vitesse-lite
vite --port 3333 --open

failed to load config from /Users/travisklein/Dropbox/vueApps/test/vitesse-lite/vite.config.ts
error when starting dev server:
/Users/travisklein/Dropbox/vueApps/test/vitesse-lite/node_modules/.pnpm/@unocss[email protected]/node_modules/@unocss/core/dist/index.cjs:188
return this._map.get(key1)?.has(key2);
^

SyntaxError: Unexpected token '.'
at wrapSafe (internal/modules/cjs/loader.js:931:16)
at Module._compile (internal/modules/cjs/loader.js:979:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)
at Module.load (internal/modules/cjs/loader.js:879:32)
at Function.Module._load (internal/modules/cjs/loader.js:724:14)
at Module.require (internal/modules/cjs/loader.js:903:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object. (/Users/travisklein/Dropbox/vueApps/test/vitesse-lite/node_modules/.pnpm/[email protected][email protected]/node_modules/unocss/dist/index.cjs:5:14)
at Module._compile (internal/modules/cjs/loader.js:1015:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: vite --port 3333 --open
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/travisklein/.npm/_logs/2022-02-10T20_47_49_375Z-debug.log

debug info
0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'dev' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle @~predev: @
6 info lifecycle @~dev: @
7 verbose lifecycle @~dev: unsafe-perm in lifecycle true
8 verbose lifecycle @~dev: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/travisklein/Dropbox/vueApps/test/vitesse-lite/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
9 verbose lifecycle @~dev: CWD: /Users/travisklein/Dropbox/vueApps/test/vitesse-lite
10 silly lifecycle @~dev: Args: [ '-c', 'vite --port 3333 --open' ]
11 silly lifecycle @~dev: Returned: code: 1 signal: null
12 info lifecycle @~dev: Failed to exec dev script
13 verbose stack Error: @ dev: vite --port 3333 --open
13 verbose stack Exit status 1
13 verbose stack at EventEmitter. (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack at EventEmitter.emit (events.js:314:20)
13 verbose stack at ChildProcess. (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:314:20)
13 verbose stack at maybeClose (internal/child_process.js:1021:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
14 verbose pkgid @
15 verbose cwd /Users/travisklein/Dropbox/vueApps/test/vitesse-lite
16 verbose Darwin 20.6.0
17 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dev"
18 verbose node v12.19.0
19 verbose npm v6.14.8
20 error code ELIFECYCLE
21 error errno 1
22 error @ dev: vite --port 3333 --open
22 error Exit status 1
23 error Failed at the @ dev script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Describe the bug

When I run pnpm i, I get following error message: 

ERR_PNPM_BAD_PM_VERSION  This project is configured to use v9.0.2 of pnpm. Your current pnpm is v9.1.1

That doesn't happen for vitesse. Should I drop the strict version check, or should you update something in the repo?

Reproduction

pnpm i

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 3.85 GB / 31.88 GB
  Binaries:
    Node: 22.1.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.7.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.1.1 - ~\AppData\Roaming\npm\pnpm.CMD
    bun: 1.1.7 - C:\ProgramData\chocolatey\bin\bun.EXE

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

Contributions

• I am willing to submit a PR to fix this issue
• I am willing to submit a PR with failing tests (actually just go ahead and do it, thanks!)

Following this rather simple setup none of the generated pages seem to load correctly.

npx degit antfu/vitesse-lite my-vitesse-app
cd my-vitesse-app
pnpm i
pnpm build -- --base=/hungry/
pnpm preview -- --base=/hungry/

In this mode none of the pages can be found. I get the 404 page for everything under http://localhost:4173/hungry.

Browse to http://localhost:4173/hungry/hi/aoeu

Actual:
The 404 not found page is displayed

Expected:
The Hi, aoeu! dynamic route page

Clear and concise description of the problem

I tried to copied the logic over to a second route level by adding a, let's say "[place].vue" file inside a "[name]" folder based on the previous [name].vue file, but can't make it work. How would be an approach look like for multiple levels of dynamic routes?

Suggested solution

Add multiple dynamic route levels to doc

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

I have already installed the recommended extensions in extensions.json
but I cannot have the typing hints for vue tag like

Vue Language Features (Volar) and TypeScript Vue Plugin (Volar) are already installed.
I used Vetur before but I have disabled it.

It seems that the lite version of Vitesse does not have the shims.d.ts file in the src folder that the full version has. Because of this, main.js gives a typescript "module/types not found error" on importing App.vue.

The file only requires the following in the lite version (no support for .md files anyway):

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

I created a pull request for it, hope I did that right because I've only done it once before ;-)

As always, big thanks for all the hard work!

使用的是@iconify-json/carbon这个包，在js部分根据条件返回不同的icon的class，当把逻辑抽离到一个hook函数的时候返回，发现icon不会显示出来，查看dom的时候，发现class已经在dom上了

The reactivity in the Footer component doesn't work. It is necessary to use .value explicitly

original:

<div v-if="isDark" i-carbon-moon />
<div v-else i-carbon-sun />

fix:

<div v-if="isDark".value i-carbon-moon />
<div v-else i-carbon-sun />

Describe the bug

cloned the repo.
installed element plus.
used all the unplugin packages:

// import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'
// import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import ElementPlus from 'unplugin-element-plus/vite'

did not work.

added some scss link pre processor:
// css: {
// preprocessorOptions: {
// scss: {
// additionalData: '@use "~/styles/element/index.scss" as *;',
// },
// },
// },

did not work.

what is wrong with the setup ? does it not work with auto imports ?

@antfu @YunYouJun

// vite config

///

import path from 'path'
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import Pages from 'vite-plugin-pages'
// import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'
// import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import ElementPlus from 'unplugin-element-plus/vite'

export default defineConfig({
resolve: {
alias: {
'/': ${path.resolve(__dirname, 'src')}/,
},
},
// css: {
// preprocessorOptions: {
// scss: {
// additionalData: '@use "/styles/element/index.scss" as *;',
// },
// },
// },
plugins: [
Vue({
reactivityTransform: true,
}),

ElementPlus({
  // options
}),

// https://github.com/hannoeru/vite-plugin-pages
Pages(),

// https://github.com/antfu/unplugin-auto-import
AutoImport({
  imports: [
    'vue',
    'vue/macros',
    'vue-router',
    '@vueuse/core',
  ],
  dts: true,
  dirs: [
    './src/composables',
  ],
  vueTemplate: true,
}),

// https://github.com/antfu/vite-plugin-components
// Components({
//   dts: true,
//   // extensions: ['vue', 'md'],
//   // include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
//   // resolvers: [
//   //   ElementPlusResolver({
//   //     importStyle: 'sass',
//   //   }),
//   // ],
// }),

],

// https://github.com/vitest-dev/vitest
test: {
environment: 'jsdom',
},
})

Reproduction

just adding element plus to vitesse lite repo

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (8) x64 Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz
    Memory: 17.08 GB / 31.76 GB
  Binaries:
    Node: 16.13.1 - C:\Dev\nodejs\node.EXE
    Yarn: 1.22.18 - C:\Dev\nodejs\yarn.CMD
    npm: 8.1.2 - C:\Dev\nodejs\npm.CMD

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

Hi~
I have encountered a strange problem.
When I comment out the FOOTER component, Unocss style invalid until UNOCSS HMR is triggered
Here is a repro

Describe the bug

bug 简要说明：

命令行提示：

Duplicated imports "", the one from "D:/antfu/vitesse-lite-test/src/composables/divide.ts" has been ignored
Duplicated imports "", the one from "D:/antfu/vitesse-lite-test/src/composables/sum.ts" has been ignored

查看生成的 auto-imports.d.ts中，declare global 中重复声明了空字符串。

  const : typeof import('./src/composables/minus')['']

最小重现仓库地址：

https://github.com/laddish/vitesse-lite-test/tree/test-duplicated-imports-of-empty-string

最小重现步骤：

1. clone vitesse-lite 这个项目；
2. ni 安装依赖；
3. 在 src/composables 下创建 sum.ts
   内容为

const numA = 1
const numB = 2
export {
  numA,
  numB,
}

4. 在 src/composables 下创建 minus.ts
   内容为

const numC = 1
const numD = 2
export {
  numC,
  numD,
}

5. 在 src/composables 下创建 divide.ts
   内容为

const numE = 1
const numF = 2
export {
  numE,
  numF,
}

6. nr dev 启动项目
7. 命令行 提示

  ➜  Local:   http://127.0.0.1:3333/
  ➜  Network: use --host to expose
Duplicated imports "", the one from "D:/antfu/vitesse-lite-test/src/composables/divide.ts" has been ignored
Duplicated imports "", the one from "D:/antfu/vitesse-lite-test/src/composables/sum.ts" has been ignored

8. 查看 auto-imports.d.ts，注意到自动生成了这样一行代码

  const : typeof import('./src/composables/minus')['']

其他说明

对比 unplugin-auto-import

这个 bug 最开始我怀疑是 unplugin-auto-import(https://github.com/antfu/unplugin-auto-import) 的，
因为 auto-imports.d.ts 文件是 unplugin-auto-import 生成的；
但是我把 unplugin-auto-import clone 到本地，
按照以上步骤 在 unplugin-auto-import的 playground 文件夹中尝试复现，
生成的 auto-imports.d.ts 是正常的，没有空字符串，没有出现上述bug；

对比 vitesse

于是我尝试在 vitesse 复现；
在 vitesse 中，重复上面的步骤，命令行并没有报这样的提示，查看 auto-imports.d.ts也是正常的。

vitesse 最小重现地址（没有这个bug，没有出现这个提示，只是对比）
https://github.com/laddish/vitesse-test/tree/test-duplicated-imports-of-empty-string

尝试避免这个 bug

按照复现步骤在导出的时候不要换行，
这样就不会在 vitesse-lite 中触发这个bug。
所以这个 bug 可能是换行引起的？
sum.ts

const numA = 1
const numB = 2
export { numA, numB }

minus.ts

const numC = 1
const numD = 2
export { numC, numD }

divide.ts

const numE = 1
const numF = 2
export { numE, numF }

针对这种写法的仓库地址
https://github.com/laddish/vitesse-lite-test/tree/test-no-duplicated-imports-of-empty-string

Reproduction

https://github.com/laddish/vitesse-lite-test/tree/test-duplicated-imports-of-empty-string

System Info

windows
chrome

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

Describe the bug

git -c user.useConfigOnly=true commit --quiet --allow-empty-message --file -
[STARTED] Preparing lint-staged...
[COMPLETED] Preparing lint-staged...
[STARTED] Running tasks for staged files...
[STARTED] package.json — 1 file
[STARTED] * — 1 file
[STARTED] eslint --fix
[FAILED] eslint --fix [FAILED]
[FAILED] eslint --fix [FAILED]
[COMPLETED] Running tasks for staged files...
[STARTED] Applying modifications from tasks...
[SKIPPED] Skipped because of errors from tasks.
[STARTED] Reverting to original state because of errors...
[COMPLETED] Reverting to original state because of errors...
[STARTED] Cleaning up temporary files...
[COMPLETED] Cleaning up temporary files...

✖ eslint --fix:

Oops! Something went wrong! :(

ESLint: 9.7.0

TypeError: isBuiltin is not a function
at /Users/Documents/project/vitesse-lite/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint-plugin-n/lib/util/extend-trackmap-with-node-prefix.js:17:37
at Array.filter ()
at extendTraceMapWithNodePrefix (/Users/Documents/project/vitesse-lite/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint-plugin-n/lib/util/extend-trackmap-with-node-prefix.js:17:18)
at Object. (/Users/Documents/project/vitesse-lite/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint-plugin-n/lib/rules/no-deprecated-api.js:580:17)
at Module._compile (node:internal/modules/cjs/loader:1105:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)

Reproduction

commit: e41294c

System Info

System:
    OS: macOS 13.3.1
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 3.60 GB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.15.0 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.5.5 - /usr/local/bin/npm
  Browsers:
    Chrome: 126.0.6478.127
    Safari: 16.4

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

Contributions

• I am willing to submit a PR to fix this issue
• I am willing to submit a PR with failing tests (actually just go ahead and do it, thanks!)

首先我克隆项目到本地

npx degit antfu/vitesse-lite my-vitesse-app
cd my-vitesse-app
pnpm i

安装 and-design-vue 后修改 vite.config.ts

import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({// https://github.com/antfu/vite-plugin-components
    Components({
      dts: true,
      resolvers: [
        AntDesignVueResolver(),
      ],
    }),
})

在 pages/index.vue 里使用组件

<template>
<a-range-picker />
</template>

demo 地址 https://github.com/izhaoqing/my-vitesse-app

从启动项目到能看到页面需要两分钟，我在 pages/index.vue 里再使用一个 <a-button>123</a-button> 组件，又需要一分钟才能看到效果。

Describe the bug

const bygonz = await import(CDNURL/*! @vite-ignore */)

gets compiled to

const bygonz = ([__temp, __restore] = _withAsyncContext(() => import(ztaxCDNURL)), __temp = await __temp, __restore(), __temp);

and throws a warning

The above dynamic import cannot be analyzed by Vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.

is there a config flag somewhere that will pass along the comment to supress the warning?

Reproduction

https://stackblitz.com/edit/vitesse-lite-bygonz?file=src%2Fcomponents%2FFriendList.vue

System Info

its in stackblitz:

❯ npx envinfo --system --binaries --browsers
ERR!: Failed to install package

error Command failed with exit code 1

but i get the same error locally:

  System:
    OS: macOS 10.15.7
    CPU: (4) x64 Intel(R) Core(TM) i7-3520M CPU @ 2.90GHz
    Memory: 52.52 MB / 16.00 GB
    Shell: 3.5.0 - /usr/local/bin/fish
  Binaries:
    Node: 16.15.0 - ~/.local/share/nvm/v16.15.0/bin/node
    Yarn: 1.22.18 - ~/.local/share/nvm/v16.15.0/bin/yarn
    npm: 8.10.0 - ~/.local/share/nvm/v16.15.0/bin/npm
  Browsers:
    Safari: 15.4

### Used Package Manager

npm

### Validations

- [X] Follow our [Code of Conduct](https://github.com/antfu/.github/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guide](https://github.com/antfu/contribute).
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
- [X] The provided reproduction is a [minimal reproducible](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.

Hi, so i want use this template and install with degit but i got error thats say

! could not find commit hash for master

I think thats error because this repo use branch main instead of master, so i add param #main to template name on degit and its working.

And please read my PR #14 to fix it

Sorry waste u time, but i encountered a problem.
I degit antfu/vitesse-lite And executed command pnpm i they smooth operation.
when i execut pnpm dev Error prompt it

D:\VUE\demo\vue-minesweeper>pnpm dev

> @ dev D:\VUE\demo\vue-minesweeper
> vite --port 3333 --open

failed to load config from D:\VUE\demo\vue-minesweeper\vite.config.ts
error when starting dev server:
D:\VUE\demo\vue-minesweeper\node_modules\.pnpm\@[email protected][email protected]\node_modules\@unocss\vite\dist\index.cjs:284
        return command === "build" && !options.build?.ssr;
                                                     ^

SyntaxError: Unexpected token '.'
    at wrapSafe (internal/modules/cjs/loader.js:915:16)
    at Module._compile (internal/modules/cjs/loader.js:963:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (D:\VUE\demo\vue-minesweeper\node_modules\.pnpm\[email protected][email protected]\node_modules\unocss\dist\vite.cjs:5:20)
    at Module._compile (internal/modules/cjs/loader.js:999:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
 ELIFECYCLE  Command failed with exit code 1.

Can you tell me any solution and what caused this problem ,Thanks.

I try to build the repo for production with:
npm run build
but no success when I publish the code on a live server (GitHub or my server on apache)
it works in local with npx live-server dist --port=4000 --no-browser

This the repo:
https://github.com/electroheadfx/ARPA3

Page error on github: https://electroheadfx.github.io/ARPA3/
404 error

on my website:
http://efxdesign.fr/working/ARPA3/
I have differents errors:
[Error] Did not parse stylesheet at 'http://efxdesign.fr/assets/index.44fc10bc.css' because non CSS MIME types are not allowed in strict mode.
[Error] TypeError: 'text/html' is not a valid JavaScript MIME type.

Any idea about ?

thanks

Clear and concise description of the problem

how to create web components (to use with other frameworks) with the configuration provided with this template, i almost make it works but unocss is not generating any style (i'm using attributify mode)

Suggested solution

maybe an example or another template?

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

I used this template and deleted the .git folder and then opened a new repo and linked it to a new online repo, I made changes and commited and the files got reversed back to it's original shape, all my new changes were lost...