antfu-collective / vitesse Goto Github PK

Hi, what do you guys suggest I should do? I don't wanna put // @ts-ignore everytime I see something like that if it's possible

Hello,

I'm trying to get the "meta" key of the frontmatter in markdown files hoisted up to the route level, currently a meta yaml keyword in a .md file is ignored, and a

<route>
meta:
  customMeta: "value"
</route>

is required elsewhere in the markdown file; perhaps I'm missing something? How could you control the layout that generates the markdown without a separate component?

One could provide a wrapper .vue for vite-plugin-md that hoists the meta up, but, again, I have a feeling I'm missing something.

Thanks.

Hi Anfu, thanks for the awesome work you did with this template.

I am considering using it in my next project in a scenario similar to this:

root-portal-app (vitesse app)

• index (landing public page)
  • other public pages and markdown files
• docs/index (landing page for docs)
  • other public doc pages and markdown files
• legacy-vue-2-app via git submodule that runs standalone (with auth). Let's say this is a "projects" directory so any route starting with /project would have to be "relayed" to the legacy app which does have authentication. (we would not want auto-generated routes in this directory

Is this scenario possible to do with vitesse being the top app?

Ideally, in the future I would like to start migrating the legacy app (basically route by route or feature by feature) into Vue 3 in the vitesse realm. This is kind of a similar concept of vue-microfrontends and single-spa without the whole microfrontend stuff.

Please let me know your thoughts.

Had project started a few days ago using this as starting point, works great.

npx degit latest and appears hmr no longer works (try changing the footer and doesn't catch the change.

If this helps my previously working vite.config.js

I dont know if it is related with vitesse, vite-ssg or just a vite problem: the problem occurs when enabling manifest on buildOptions.

There is a PR 2353 merged on vite 2.0.5, but updating vite on vitesse project, just still fails when building (I removed node_modules/.vite and .vite-ssg-temp directories):

vite --version
vite/2.0.5 win32-x64 node-v15.5.1

pnpm version
{
  npm: '7.3.0',
  node: '15.5.1',
  v8: '8.6.395.17-node.23',
  uv: '1.40.0',
  zlib: '1.2.11',
  brotli: '1.0.9',
  ares: '1.17.1',
  modules: '88',
  nghttp2: '1.41.0',
  napi: '7',
  llhttp: '2.1.3',
  openssl: '1.1.1i',
  cldr: '38.0',
  icu: '68.1',
  tz: '2020b',
  unicode: '13.0'
}

Output:

[vite-ssg] Build for client...
vite v2.0.5 building for production...
✓ 78 modules transformed.
dist/index.html                    1.11kb
dist/manifest.webmanifest          0.38kb
dist/registerSW.js                 0.13kb
dist/manifest.json                 1.68kb
dist/ssr-manifest.json             3.76kb
dist/assets/README.9913d926.js     1.15kb / brotli: 0.40kb
dist/assets/about.21ce0002.js      1.57kb / brotli: 0.57kb
dist/assets/[...all].b7157a5a.js   0.25kb / brotli: 0.18kb
dist/assets/[name].d94b4499.js     1.38kb / brotli: 0.71kb
dist/assets/404.5267aea9.js        1.10kb / brotli: 0.55kb
dist/assets/home.808072ce.js       0.36kb / brotli: 0.23kb
dist/assets/app.e9e410c2.css       17.50kb / brotli: 3.54kb
dist/assets/app.f4fff1a1.js        46.27kb / brotli: 13.60kb
dist/assets/vendor.11987bd3.js     75.35kb / brotli: 26.17kb
@rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.

[vite-ssg] Build for server...
vite v2.0.5 building SSR bundle for production...
✓ 45 modules transformed.
rendering chunks (1)...TypeError: Cannot read property 'facadeModuleId' of undefined
    at getChunkName (XXX\node_modules\.pnpm\v[email protected]\node_modules\vite\dist\node\chunks\dep-e0f09032.js:26966:27)
    at XXX\node_modules\.pnpm\v[email protected]\node_modules\vite\dist\node\chunks\dep-e0f09032.js:26992:73
    at Array.map (<anonymous>)
    at createChunk (XXX\node_modules\.pnpm\v[email protected]\node_modules\vite\dist\node\chunks\dep-e0f09032.js:26992:59)
    at Object.generateBundle (XXX\node_modules\.pnpm\v[email protected]\node_modules\vite\dist\node\chunks\dep-e0f09032.js:27009:53)
    at XXX\node_modules\.pnpm\r[email protected]\node_modules\rollup\dist\shared\rollup.js:19049:25
    at processTicksAndRejections (node:internal/process/task_queues:93:5) {
  code: 'PLUGIN_ERROR',
  plugin: 'vite:manifest',
  hook: 'generateBundle'
}
 ERROR  Command failed with exit code 1.

My new vitesse project https://github.com/Septias/hot-potato gets stuck with 'Building for production...' and doesn't finish the build step. I tried it on my laptop and pc but both won't finish building for production.
I'm using VSCode Terminal which utilizes PowerShell on Windows x64.

Hi, great works on this!!

Providing layout feature just like nuxt.js would be very helpful.
I'm wondering if it is even possible to have such feature in vite.
Do you have any suggestion on how to do this?
Thanks!!

Repro :

• npx degit antfu/vitesse my-vitesse-app
• Create src/models folder
• Create src/models/test.ts file

// test.ts
export interface Test {
  id: number
}

In src/pages/index.vue

add in script :

// index.vue
import { Test } from '~/models/test'

This error pop up with a blank page :

Uncaught SyntaxError: The requested module '/src/models/test.ts' does not provide an export named 'Test'

Thank you.

Currently, the site loads 2.7 MB(200 KB compressed) CSS. The advantage of utility only CSS library like tailwind is that you only load what you use, and thus purgecss should be used to limit the CSS bundled to only the classes being used

That's an awesome project I just discovered.

I'm trying to learn vue 3 by building some small apps and this template can be very helpful.

Is there any plan to add vuex 4 support and some small examples using it ? It would be great if there is some examples using vuex 4 modules.

Get alert on dev mode
postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
Used last version on 28.11.2020

Hi,

I think there is a problem with [email protected].

With this version, I lost the "Footer"

To resolve, change the "package.json" with:
-- "vite": "2.0.0-beta.67",
-- "vite-plugin-components": "0.6.6",
(without the "^" : "^0.6.6" => "0.0.6")
=> it works.

@antfu you forgot to rename inlineRegister to injectRegister in vite.config.ts file.

At the outset, I would like to thank you for this starter template. It's great!
However, I cannot cope with the PWA configuration. Don't know how to create sw.js or how to connect it with Google Workbox.

I installed this packages:

npm install workbox-core workbox-precaching workbox-routing workbox-strategies workbox-cacheable-response workbox-expiration workbox-window
npm install workbox-cli -D

bud I don't have idea what i need to do next.. :(

Today, I open this template(lastest of repo) --> But have issue with VSCode.

1. Module have no default export
2. In template, have no suggestion code.
   

I researched and found this vuejs/vitepress#137 (comment) --> Evan suggest use Volar, then I try but still not work! I use Vetur 0.31.3 and VsCode lastest.

Hope you can answer this question :v

Hi:

It would be great if we can include some guide on vitesse to include some icons that vite-plugin-purge-icons just delegates to a network call to iconify (because some dev dependencies are misssing), and then on offline mode just doesn't work.

For example, I have changed the icon for dark and night mode to use mdi icons (mdi-brightness-6 to switch to dark mode and mdi-brightness-4 to switch to light mode), and when I set the service worker on offline mode and switch from light to dark mode, then the icon dissapear and get an error from the network tab.

As a guide:

1. Add icon set and tools from iconify as dev dependencies: pnpm install --save-dev @iconify/json-tools @iconify/json
2. Modify PurgeIcons to include icons to your icon set, for exmaple:

    PurgeIcons({
      // globs for searching source file to analyze
      content: [
        '**/*.html',
        '**/*.js',
        '**/*.vue', // scan for .vue file as well
      ],
      // whitelist for icons that might be used dynamically
      included: [
        'mdi:brightness-6', // from Material Design Icons
        'mdi:brightness-4', // from Material Design Icons
      ],
    }),

Bye.

As far as I know, Vite could discover the dependencies automatically, is there any reason we should put the vue, vue-router, @vueuse/core explicitly in the optimizeDeps.include of vite.config.ts?

I have cloned this repo, install dependencies and start it - both yarn and pnpm.
Im on windows now, and did try with wsl and without, but HMR not working either.

The naked vite repo's HMR works fine with and without wsl - create vite-app with vue-ts template.

Thank you for your response

@antfu I think it would be a good practice to include some security improvements to instruct people to do things a little more secured.

A first step would be to include a CSP here, very simple without complex things.

For example, I use WebPageTest to audit my applications, a step further Lighthouse (this is the result for vitesse demo, I have included #58 (comment) to optimize png icons):

The goal is to get something like this (my app is still in our servers, so the CDN entry is good here, using netlify):

A simple CSP I get working with vitesse demo (not perfect) will be to add this header at least for /:

'content-security-policy': "default-src 'self'; connect-src 'self'; font-src 'self'; manifest-src 'self'; img-src 'self'; frame-src none; worker-src 'self'; base-uri 'self'; child-src 'self'; frame-ancestors 'none'; object-src 'none'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'"

'unsafe-eval' on script-src is required due to i18n: see this intlify/vue-i18n-next#198

We also need to include these headers, at least for /:

x-content-type-options: nosniff
x-frame-options: DENY
x-xss-protection: 1 ; mode=block

and this header for all resources:

x-content-type-options: nosniff

A more complex sample will be to use nonce, but this will force us to change html files and do some server scripting (in fact entire CSP will change in this case, so don't try):

For example, using this CSP script-src:

script-src 'unsafe-inline' 'nonce-9b03dfef-98aa-42d9-89ad-3ce2dc57ffd3' 'strict-dynamic' https:;

will prevent to execute this script from index.html:

<script>
    (function() {
      const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
      const setting = localStorage.getItem('color-schema') || 'auto'
      if (setting === 'dark' || (prefersDark && setting !== 'light'))
        document.documentElement.classList.toggle('dark', true)
    })()
  </script>

and we need to change dynamically for each request to (also the CSP script-src nonce entry for each request and add the same nonce entry to each <script src="xxx" nonce="zzzzz"> tag):

<script nonce="9b03dfef-98aa-42d9-89ad-3ce2dc57ffd3">
    (function() {
      const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
      const setting = localStorage.getItem('color-schema') || 'auto'
      if (setting === 'dark' || (prefersDark && setting !== 'light'))
        document.documentElement.classList.toggle('dark', true)
    })()
  </script>

You can see a working sample here: https://covid19desa.saludcontigo.co:33013 (made with vite 1 + polymer 3 webcomponents + vue components). Nonces are hidden from devtool elements tab, to see it you need to open network tab and see source.

Bug report

css.gg icons cannot be auto imported as others.

Reproduction

1. Open src/components/Footer.vue, replace carbon-sun with gg-sun(Or replace any other icon with css.gg icon)
2. pnpm dev
3. Check the devtools console

Reproduction repo

https://github.com/Ynewtime/vitesse-icon-gg

1. Cloned repo using Use template button
2. Pull down down, ran pnpm i
3. Ran pnpm run dev

Got the following error:

➜  vite-blog git:(master) ✗ pnpm run dev

> @ dev /home/harlan/sites/vite-blog
> vite --port 3333 --open

 > error: Cannot start service: Host version "0.8.57" does not match binary version "0.8.53"

1 error
[vite-plugin-windicss] failed to load config "/home/harlan/sites/vite-blog/tailwind.config.ts"
[vite-plugin-windicss] Error: Command failed: /home/harlan/sites/vite-blog/node_modules/.pnpm/[email protected]/node_modules/esbuild/bin/esbuild --service=0.8.57
 > error: Cannot start service: Host version "0.8.57" does not match binary version "0.8.53"

1 error

 ERROR  Command failed with exit code 1.

Guessing it may be related to @windicss/plugin-utils using esbuild: 0.8.57, where vite uses esbuild: 0.8.53

Repo: https://github.com/loonpwn/vite-blog

How to add when icon name is inside a variable?

const icon="carbon-user" 

<carbon-user class="text-5xl" />

This is not working on Vitesse
<span class="iconify" data-icon="carbon:center-circle" data-inline="false"></span>

You can try it!

The repository is not public or does not exist.

git clone https://github.com/antfu/vite-starter
fatal: repository 'https://github.com/antfu/vite-starter/' not found

I'm wondering how to approach i18n with SSG, having /{locale}/ namespace in the URL.

I guess that's something out of scope for vitesse to do on its own? Too opinionated approach already?

Afaik there's three potential things to do:

1. Add a locale route
2. Add meta tags for alternative URLs
3. Language detection -> redirection

I'm curious if someone else was dealing with this already

Love the template and in developing my template I realized I wanted to add in some Netlify functions to the template and in deciding that I moved the both frontend and backend into a Rush monorepo.

I have used Lerna monorepos before but Rush feels like it has more momentum, better isolation, and Microsoft's blessing

Anyway, with a little playing around I got most of it working but I still have a few issues I can't seem to sort out and was wondering if an issue here might eventually lead to a small documentation update for other Rush users ... if that's helpful. Below I explain the "solution" as I've set it up so far but then I mention the issue I'm running into.

Monorepo Setup

The key steps I've taken (after adding the Vitesse project as a package located at "/frontend":

1. Vetur - we need to add a vetur.config.js file to the root of the repo as Rush monorepos do not have a package.json at the root and you need to point to the various projects where Vetur will be used. For myself, I just have a single project which uses Vetur/Vue (but more than one which uses ESLint ... more on that later). With only one Vue repo in the monorepo, my config looks like this:

   module.exports = {
     settings: {
       'vetur.useWorkspaceDependencies': true,
       'vetur.experimental.templateInterpolationService': true
     },
     projects: [
       {
         root: 'frontend/',
         package: 'package.json',
         tsconfig: 'tsconfig.json',
         snippetFolder: '.vscode/vetur/snippets',
         globalComponents: ['src/components/**/*.vue']
       }
     ]
   };

2. ESLint - the goal with ESLint is to have a baseline configuration in the root of the repo -- called eslint.config.json -- which all repos will extend from. This is important, because while we should always strive to be consistent, the need to make distinctions between repos will almost surely exist (especially between frontend and backend). This means that each individual repo will have a .eslintc file which refers back to the standards while leveraging the distinct features needed for a given repo. The backend/functions repo is nothing more than:

   {
     "extends": ["../eslint.config.json"]
   }

   but with the frontend, since Vue needs a bit more in terms of rules, plugins, etc., the file looks like:

   {
     "env": {
       "es2021": true
     },
     "extends": ["@antfu/eslint-config-ts", "../eslint.config.json"],
     "plugins": ["vue"],
     "parser": "vue-eslint-parser",
     "rules": {
       "vue/html-self-closing": "off"
     }
   }

   Note: I'm not really sure what setting the env property here is doing but I'm just mimicking vitesse

   Note2: @typescript-eslint is included as a plugin in the base config

3. PostCSS8 - with vitesse and the use of PNPM, you can force all packages to use PostCSS8 and that works great but even though I'm using PNPM with Rush (that is the preferred pkg manager), you need to do it differently. In this case you change the /common/config/rush/pnpmfile.js:

   module.exports = {
     hooks: {
       readPackage
     }
   };
   
   function readPackage(packageJson, context) {
     if (packageJson.dependencies.postcss) {
       context.log(`package ${packageJson.name} contains postcss dep and will be forced to version 8`);
       packageJson.dependencies['postcss'] = '8.2.1'
     }
     if(packageJson.devDependencies.postcss) {
       context.log(`package ${packageJson.name} contains postcss as a dev dependency and will be forced to version 8`);
       packageJson.dependencies['postcss'] = '8.2.1'
     }
   
     return packageJson;
   }

   Note: i strongly suspect the overrides configuration from PNPM used with Vitesse will become an option for Rush too but surprisingly their default version of PNPM is prior to this feature being introduced

The Problem

The above setup seems to largely work but I get phantom errors in my VueJS templates:

The error code of 6133 would appear to originate from TS itself rather than ESlint but is making it's way to Vetur. But for the life of me I can not figure out how you got SFC files which use the setup RFC to ignore these errors.

My best guess is that it originates from the @vuedx/typescript-plugin-vue plugin but I do include this in my tsconfig.json file.

Hi,

I would like to use Vuetify instead of tailwind.
Until now Vuetify was not compliance with Vue3, but now, there is Vuetify 3 Alpha.
Normaly, we can use it with vue-cli 4 and add

import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
import App from './App.vue'

const app = createApp(App)
const vuetify = createVuetify(...) // Replaces new Vuetify(...)

app.use(vuetify)

app.mount('#app')

How can I do this with ViteSSG ?

Regards,
Franck

In reference to this https://github.com/antfu/vitesse/blob/master/src/pages/README.md

I've seen the ~ prefix used before and it has been used to reference the node_modules folder (e.g. Webpack). This is a bit confusing with this starter.

Another way I've seen a way to reference the ./src folder is to use the @ prefix.

So that means that this:

import { isDark } from '../../../../logics'

Becomes this:

import { isDark } from '@/logics'

Thoughts?

even if I add rule "react/react-jsx-in-scope": 0 in .eslintrc it still reports this error, how to fix it?

Hi, Anthony, I use this template to create a demo, there are two problems that make it impossible to use directly.

The First Error

At the beginning, I install all package and run dev, an error occurred in the program, the log is as follows:

E:\Project\test\demo\vitesse-demo (main -> origin)
λ yarn dev
yarn run v1.22.10
$ vite
Optimizable dependencies detected:
@vueuse/core, @vueuse/head, nprogress, prism-theme-vars, vue, vue-i18n, vue-router
Pre-bundling them to speed up dev server page load...
(this will be run only when your dependencies or config have changed)
(node:15100) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, open '\Project\test\demo\vitesse-demo\node_modules\.vite\esbuild.json'
    at Object.openSync (fs.js:461:3)
    at Object.readFileSync (fs.js:364:35)
    at optimizeDeps (E:\Project\test\demo\vitesse-demo\node_modules\vite\dist\node\chunks\dep-b48a59d1.js:71274:41)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async runOptimize (E:\Project\test\demo\vitesse-demo\node_modules\vite\dist\node\chunks\dep-b48a59d1.js:71717:13)
    at async Server.httpServer.listen (E:\Project\test\demo\vitesse-demo\node_modules\vite\dist\node\chunks\dep-b48a59d1.js:71730:13)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:15100) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1) (node:15100) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

I found the Vite's version is 2.0.0-beta.46, I try to update the version into 2.0.0-beta.64, now, the error has been resolved.

The Second Error

The error has not been resolved, I haven't found a solution yet, need your help!

When I use yarn build, the program reports an error:

E:\Project\test\demo\vitesse-demo (main -> origin)
λ yarn build
yarn run v1.22.10
$ cross-env NODE_ENV=production vite-ssg build

[vite-ssg] Build for client...
building for production...
✓ 67 modules transformed.
dist/index.html                    1.05kb
dist/manifest.webmanifest          0.28kb
dist/registerSW.js                 0.13kb
dist/ssr-manifest.json             2.43kb
dist/assets/README.27f530f0.js     1.13kb / brotli: 0.40kb
dist/assets/about.a824c120.js      1.56kb / brotli: 0.56kb
dist/assets/[...all].ceba0a27.js   0.22kb / brotli: 0.16kb
dist/assets/[name].708befc2.js     1.38kb / brotli: 0.71kb
dist/assets/app.141bf8a6.css       18.25kb / brotli: 3.86kb
dist/assets/app.09174be0.js        52.93kb / brotli: 15.30kb
dist/assets/vendor.10d959a6.js     77.67kb / brotli: 26.96kb

[vite-ssg] Build for server...
building SSR bundle for production...
✓ 25 modules transformed.
.vite-ssg-temp/manifest.webmanifest        0.28kb
.vite-ssg-temp/registerSW.js               0.13kb
.vite-ssg-temp/app.js                      54.40kb
.vite-ssg-temp/assets/style.ecfa198b.css   29.10kb
Error: Cannot find module 'vite-plugin-pages/client'
Require stack:
- E:\Project\test\demo\vitesse-demo\.vite-ssg-temp\app.js
- E:\Project\test\demo\vitesse-demo\node_modules\vite-ssg\dist\node\cli.js
- E:\Project\test\demo\vitesse-demo\node_modules\vite-ssg\bin\vite-ssg.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1029:15)
    at Function.Module._load (internal/modules/cjs/loader.js:898:27)
    at Module.require (internal/modules/cjs/loader.js:1089:19)
    at require (internal/modules/cjs/helpers.js:73:18)
    at Module.<anonymous> (E:\Project\test\demo\vitesse-demo\.vite-ssg-temp\app.js:7:14)
    at Module._compile (internal/modules/cjs/loader.js:1200:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1220:10)
    at Module.load (internal/modules/cjs/loader.js:1049:32)
    at Function.Module._load (internal/modules/cjs/loader.js:937:14)
    at Module.require (internal/modules/cjs/loader.js:1089:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'E:\\Project\\test\\demo\\vitesse-demo\\.vite-ssg-temp\\app.js',
    'E:\\Project\\test\\demo\\vitesse-demo\\node_modules\\vite-ssg\\dist\\node\\cli.js',
    'E:\\Project\\test\\demo\\vitesse-demo\\node_modules\\vite-ssg\\bin\\vite-ssg.js'
  ]
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I was using your package vite-ssg yesterday, but I ran into the same problem.

Please help me see how to solve it when you are free, Thank you!

I create a test.tsx in page dir like this:

export const Test = defineComponent({
    setup() {
        return reactive({
            isEnabled: false
        })
    },
    render() {
        return <div>
            <div>Foo:</div>
            <Foo isEnabled={this.isEnabled}></Foo>
        </div>
    }
})

export default Test

but /test show 404 error

I am using the Volar extension. But I can't auto format the code. Does anyone else encountered and fixed this issue?

Replace the json i18n files with yaml: in this way we avoid having to include double quotes, less text to write.

Include @rollup/plugin-yaml (or similar), modify the i18n.ts module and include the files in the locales directory so that they are in the yaml format.

@antfu I dont know what is doing github, review this entry please, and make you a PR here:

userquin@576982c

I have opmimized png icons to reduce its size:

pwa-192x192.png: -31.04%
pwa-512x512.png: -14.66%

using https://ezgif.com/

Hi! Awesome template, thanks for sharing!

I jut tried vitesse locally and while pnpm dev works just fine, pnpm build fails for me like so:

❯ pnpm build

> @ build /Users/ziga/development/ziga_vitesse
> cross-env NODE_ENV=production vite-ssg build --script async

[vite-ssg] Build for client...
building for production...
/Users/ziga/development/ziga_vitesse/node_modules/.pnpm/[email protected]/node_modules/workbox-build/build/lib/populate-sw-template.js:41
    throw new Error(errors['no-manifest-entries-or-runtime-caching']);
          ^

Error: Couldn't find configuration for either precaching or runtime caching. Please ensure that the various glob options are set to match one or more files, and/or configure the runtimeCaching option.
    at module.exports (/Users/ziga/development/ziga_vitesse/node_modules/.pnpm/[email protected]/node_modules/workbox-build/build/lib/populate-sw-template.js:41:11)
    at module.exports (/Users/ziga/development/ziga_vitesse/node_modules/.pnpm/[email protected]/node_modules/workbox-build/build/lib/write-sw-using-default-template.js:50:25)
    at async generateSW (/Users/ziga/development/ziga_vitesse/node_modules/.pnpm/[email protected]/node_modules/workbox-build/build/generate-sw.js:229:21)
 ERROR  Command failed with exit code 1.

I figured workbox is used by VitePWA and when I comment out VitePWA from vite.config.ts build succeeds.

After I upgrade vite to 1.0.0-rc.6 the routing in build is not working any more, it working in dev.
If I down grade to rc-4 it working again

vite-pwa/vite-plugin-pwa#23 (comment)

Bug report

Markdown file with specified layout will render extra text.

1、Add a new page like pages/test.md

Hello World

<route lang="yaml">
meta:
  layout: home
</route>

2、Can avoid by adding a hidden class:

Hello World

<route lang="yaml" class="hidden">
meta:
  layout: home
</route>

Reproduction repo

vitesse-md-with-layout

Since last week I have been getting the following error in the browser when doing pnpm dev:

env.js:3 Uncaught ReferenceError: __DEFINES__ is not defined
    at env.js:3

That code is part of vite http://localhost:3333/node_modules/.pnpm/[email protected]/node_modules/vite/dist/client/env.js, not sure why/how it gets to browser?

Os: Win10
node: 14.15.3

Hi, I get this error, trying to run build. Did upgrade all the dependencies, but still error is there. Maybe someone has stumbled on something like this before?

Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
    at error (C:\_code\JS\_tmp\vitesse\node_modules\.pnpm\[email protected]\node_modules\rollup\dist\shared\rollup.js:5265:30)
    at Module.error (C:\_code\JS\_tmp\vitesse\node_modules\.pnpm\[email protected]\node_modules\rollup\dist\shared\rollup.js:9842:16)
    at tryParse (C:\_code\JS\_tmp\vitesse\node_modules\.pnpm\[email protected]\node_modules\rollup\dist\shared\rollup.js:9723:23)
    at Module.setSource (C:\_code\JS\_tmp\vitesse\node_modules\.pnpm\[email protected]\node_modules\rollup\dist\shared\rollup.js:10149:19)
    at ModuleLoader.addModuleSource (C:\_code\JS\_tmp\vitesse\node_modules\.pnpm\[email protected]\node_modules\rollup\dist\shared\rollup.js:18319:20)
    at async ModuleLoader.fetchModule (C:\_code\JS\_tmp\vitesse\node_modules\.pnpm\[email protected]\node_modules\rollup\dist\shared\rollup.js:18375:9)
    at async Promise.all (index 0) {
  code: 'PARSE_ERROR',
  parserError: SyntaxError: Unexpected token (1:0)
      at Object.pp$4.raise (C:\_code\JS\_tmp\vitesse\node_modules\.pnpm\[email protected]\node_modules\rollup\dist\shared\rollup.js:15573:13)
      at Object.pp.unexpected (C:\_code\JS\_tmp\vitesse\node_modules\.pnpm\[email protected]\node_modules\rollup\dist\shared\rollup.js:13265:8)
      at Object.pp$3.parseExprAtom (C:\_code\JS\_tmp\vitesse\node_modules\.pnpm\[email protected]\node_modules\rollup\dist\shared\rollup.js:14972:10)
      at Object.pp$3.parseExprSubscripts (C:\_code\JS\_tmp\vitesse\node_modules\.pnpm\[email protected]\node_modules\rollup\dist\shared\rollup.js:14775:19)
      at Object.pp$3.parseMaybeUnary (C:\_code\JS\_tmp\vitesse\node_modules\.pnpm\[email protected]\node_modules\rollup\dist\shared\rollup.js:14752:17)
      at Object.parseMaybeUnary (C:\_code\JS\_tmp\vitesse\node_modules\.pnpm\[email protected]\node_modules\rollup\dist\shared\rollup.js:19167:29)
      at Object.pp$3.parseExprOps (C:\_code\JS\_tmp\vitesse\node_modules\.pnpm\[email protected]\node_modules\rollup\dist\shared\rollup.js:14687:19)
      at Object.pp$3.parseMaybeConditional (C:\_code\JS\_tmp\vitesse\node_modules\.pnpm\[email protected]\node_modules\rollup\dist\shared\rollup.js:14670:19)
      at Object.pp$3.parseMaybeAssign (C:\_code\JS\_tmp\vitesse\node_modules\.pnpm\[email protected]\node_modules\rollup\dist\shared\rollup.js:14638:19)
      at Object.pp$3.parseExpression (C:\_code\JS\_tmp\vitesse\node_modules\.pnpm\[email protected]\node_modules\rollup\dist\shared\rollup.js:14604:19) {
    pos: 0,
    loc: Position { line: 1, column: 0 },
    raisedAt: 1
  },
  id: 'C:\\_code\\JS\\_tmp\\vitesse\\index.html',
  pos: 0,
  loc: {
    file: 'C:\\_code\\JS\\_tmp\\vitesse\\index.html',
    line: 1,
    column: 0
  },
  frame: '1: <!DOCTYPE html>\r\n   ^\n2: <html lang="en">\r\n3: <head>\r',
  watchFiles: [ 'C:\\_code\\JS\\_tmp\\vitesse\\index.html' ]
}
 ERROR  Command failed with exit code 1.

Hi antfu,

I was having some issues trying to get the vitesse working properly, where when running pnpm dev it would forever be in a loading state. I looked around and noticed this in the network tab.

So I then removed the plugin from vite.config.ts and reloaded the app it loaded fine.

Browser: Firefox 79.0
Operating System: Windows 10
Node: v12.18.2

Hi!, thank for you project helped developers integrate vitejs faster! As you see the most thing missing in vite eco-system for now is testing, still has not any office choice to setup testing, (jest | mocha ..). Do you think we can go forward a step to setup testing included in vitesse ?

Thank!

It seems the vue-shims.d.ts is missing from this project. I cloned the repo using npx degit antfu/vitesse my-vitesse-app and opened up the project in a fresh vscode install with only the recommended extensions installed just to make sure it wasn't a problem with my VSCode install. I assume a shims file is needed for typescript to recognize .vue extensions

Without the spacing provided by this css for <p> tags, new lines are not correctly rendered.
https://github.com/antfu/vitesse/blob/bcfa93e1d4e3345961b7d5be58047b30388665cb/src/main.postcss#L18-L34
Also # h1 doesn't render correctly.

using vite-plugin-md in a new bare-bone vite project seems to work fine though.

I am able to build using Vite without issue but attempting to prerender with Presite seems to fail with the following message:

Message from http://localhost:64987/_assets/style.af3afb7c.css:undefined:undefined Failed to load resource: net::ERR_FAILED

But the referenced file does exist (see below). That said, I have no idea why the :undefined:undefined is part of the node net::ERR_FAILED message.

Thanks for Vitessg <3

just use this template and created new repo on my github

then run
git clone https://github.com/alijuniorbr/vitesse.git

afted done, run
cd vitesse
pnpm i
pnpm dev

the browser open at http://localhost:3333/ but the page are blank and the console shows this error

Uncaught ReferenceError: DEFINES is not defined
at env.js:16

vitesse template not works on my pc, here my step:

git clone https://github.com/antfu/vitesse.git
cd vitesse
pnpm i
pnpm dev

I got errors in browser:

[Vue Router warn]: No match found for location with path "/"
[Vue Router warn]: No match found for location with path "/about"

Environment:

• Windows 10 x64
• Node.js 14.14.0

First, really great job with this template @antfu ! Got me up and running in no time.

Only thing I kind a miss is the type checking feature for the dev server console like we have when using Vue CLI to bootstrap a project. See screenshots for example of what I mean.

I am generally interested if this is even possible with Vite. And if so, I would very much appreciate if you could point me in the right direction on how to get that implemented.

Thanks!