antfu-collective / vite-ssg Goto Github PK
View Code? Open in Web Editor NEWStatic site generation for Vue 3 on Vite
License: MIT License
Static site generation for Vue 3 on Vite
License: MIT License
It looks like #app
is hardcoded at the moment, would you be open to adding an option to mount on a different dom node ?
What are the things to consider if using SSG with Suspense?
Thanks
Hi,
I'm trying vite, and vite-ssg for my new project.
I was using Nuxt before, with static target.
I'm trying to understand how to set up jamstack with vite-ssg: I've a headless CMS with an api, and a hook which restarts a build each time I publish an article.
Then the website fetchs the api at build time, and renders the page.
It also cache the api call, to be able to do it in browser when spa navigation.
Do you have an idea if I can do the same easily with vite?
Thanks.
Mathieu
I read the documentation of vite i18n plugin and found a possible simpler solution.
The existing works fine i dont have any problems with it.
I cannot build with ssg after i made change: Error: Cannot find module '@intlify/vite-plugin-vue-i18n/messages'
Can is use this import with vite-ssg or not?
Thank you in advance for your answer
with vite-ssg, main.ts returns a createApp function instead of app instance
how to set config for app?
I'm building a project with this plugin and works pretty well, the problem is that vue-router doesn't resolve the right HTML, I thought that it was my configuration problem but watching Vitesse example I realize it works with the same resolution.
Build script create an SSG project but when put the directory in production or a http-server it renders its pages with JS(how spa), and not like a Static site.
I don't know if I'm misunderstanding something or if it's a real problem. I hope you can answer me and I don't make you uncomfortable.
Maybe I'm missing something, but it seems the production bundle is not created when building the project (no folder named .vite-ssg-dist/)
I tried a clean vitesse project and get the same problem : no server production bundle !
Vitessg calls Fn(ctx)
for every route. It is useful to know which route is being generated from with fn. Is there a reason that route
not passed to fn i.e. smth like this : Fn(ctx,route)
Thanks
According to vue-router#nested
[...] nested paths that start with
/
will be treated as a root path. This allows you to leverage the component nesting without having to use a nested URL.
A router
with this structure would be legal:
[
path: '/root-level',
component: ƒ,
children: [
path: '/root-level'
...
]
]
However, vite-ssg
will render dist/root-level/root-level
.
我使用vite-ssg
生成.html,然后打包为浏览器扩展,在feat: Add Initial State
这个commit之后,vite-ssg
会在生成的.html文件末尾插入一段inline script
,这会触发浏览器CSP错误,因为浏览器认为扩展中存在inline script
是不安全的,是否可以添加选项选择是否启用这个特性呢
<script>window.__INITIAL_STATE__ = "{}"</script>
This package is too old, since vite 1, and so we can create/rename it:
vite-vue-ssg
: with vite-vue-ssg/router
, vite-vue-ssg/single-page
and vite-vue-ssg/i18n-router
.
@antfu to keep track names.
vite-ssg build -c custom.vite.config.ts
When i build monaco-editor with vite-ssg
.
I get navigator is not defined
.
A recurring example: web-resume
git clone https://github.com/YunYouJun/web-resume
pnpm install
pnpm run build
ReferenceError: navigator is not defined
at Module.<anonymous> (/Users/yunyou/github/pages/web-resume/.vite-ssg-temp/main.js:7987:19)
at Module.o._compile (/Users/yunyou/github/pages/web-resume/node_modules/.pnpm/[email protected]/node_modules/jiti/dist/v8cache.js:2:2778)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
at Module.load (internal/modules/cjs/loader.js:950:32)
at Function.Module._load (internal/modules/cjs/loader.js:790:14)
at Module.require (internal/modules/cjs/loader.js:974:19)
at require (internal/modules/cjs/helpers.js:92:18)
at __require (/Users/yunyou/github/pages/web-resume/node_modules/.pnpm/[email protected]_8be4ce4ce3ee9f8584c22c4e982f597c/node_modules/vite-ssg/dist/chunk-3FHQZVYO.js:22:12)
at build (/Users/yunyou/github/pages/web-resume/node_modules/.pnpm/[email protected]_8be4ce4ce3ee9f8584c22c4e982f597c/node_modules/vite-ssg/dist/node/cli.js:140:52)
at async Object.handler (/Users/yunyou/github/pages/web-resume/node_modules/.pnpm/[email protected]_8be4ce4ce3ee9f8584c22c4e982f597c/node_modules/vite-ssg/dist/node/cli.js:229:3)
error Command failed with exit code 1.
I try it, but it doesn't work.
if (typeof navigator !== 'undefined') {
const monaco = await import('monaco-editor')
console.log(monaco)
}
import @iconify-icons
import IconCampsite from '@iconify-icons/carbon/campsite'
cause this error
SyntaxError: Unexpected token 'export'
at wrapSafe (internal/modules/cjs/loader.js:979:16)
at Module._compile (internal/modules/cjs/loader.js:1027:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Module.<anonymous> (E:\workspace\vue3\vitesse\.vite-ssg-temp\main.js:26:20)
it seems the reason is iconify-icons do not have commonjs dist
so how to deal with modules with only ejs support?
npm i -D vite-ssg
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: undefined@undefined
npm ERR! Found: @vueuse/[email protected]
npm ERR! node_modules/@vueuse/head
npm ERR! @vueuse/head@"^0.5.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @vueuse/head@"^0.3.1" from [email protected]
npm ERR! node_modules/vite-ssg
npm ERR! dev vite-ssg@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
I built a static site with vite-ssg, but when I updated a version, I found that the site couldn't read the new version of the file because it still read the old resources.
By tracing the browser load entry, I found that the file was read from inside the serverworker cache.
Is this a problem with the build process, and what should I do to get the browser to automatically load the latest version of the file?
Hello
The command pnpm build
started to fail suddenly. The error is very new to me.
pnpm -v
6.9.1
node -v
v16.0.0
here is the whole output
pnpm build
> [email protected] build C:\Users\wahbe\Documents\GitHub\waelio.com
> cross-env NODE_ENV=production vite-ssg build
[vite-ssg] Build for client...
vite v2.3.8 building for production...
✓ 148 modules transformed.
dist/index.html 1.56kb
dist/manifest.webmanifest 0.39kb
dist/ssr-manifest.json 17.98kb
dist/assets/virtual_pwa-register.c298aae9.js 0.36kb / brotli: 0.23kb
dist/assets/app.2e115a7d.js 14.60kb / brotli: 4.38kb
dist/assets/workbox-window.prod.es5.3ec2694c.js 5.07kb / brotli: 1.83kb
dist/assets/[...all].1736958e.js 0.22kb / brotli: 0.17kb
dist/assets/timeline.fbb95060.js 1.19kb / brotli: 0.56kb
dist/assets/index.d6f56c2f.js 3.72kb / brotli: 1.12kb
dist/assets/terms.30188bec.js 10.52kb / brotli: 2.80kb
dist/assets/privacy.a41dd229.js 13.82kb / brotli: 2.19kb
dist/assets/about.29969d21.js 0.66kb / brotli: 0.28kb
dist/assets/404.5aa7cd15.js 0.52kb / brotli: 0.30kb
dist/assets/home.60b6dea3.js 0.50kb / brotli: 0.30kb
dist/assets/contact.c764fb33.js 4.81kb / brotli: 1.67kb
dist/assets/index.b25c940d.css 0.22kb / brotli: 0.10kb
dist/assets/contact.81aceb69.css 1.02kb / brotli: 0.30kb
dist/assets/app.85bb450a.css 18.71kb / brotli: 3.89kb
dist/assets/index.20a20aff.js 93.83kb / brotli: 29.41kb
dist/assets/vendor.b40dd116.js 189.95kb / brotli: 59.69kb
[vite-ssg] Build for server...
vite v2.3.8 building SSR bundle for production...
✓ 54 modules transformed.
.vite-ssg-temp/manifest.webmanifest 0.39kb
.vite-ssg-temp/main.js 134.67kb
.vite-ssg-temp/assets/style.de8298f4.css 24.08kb
[vite-ssg] Rendering Pages... (6)
TypeError: Invalid value used as weak map key
at WeakMap.set (<anonymous>)
at normalizePropsOptions (C:\Users\wahbe\Documents\GitHub\waelio.com\node_modules\.pnpm\@[email protected]\node_modules\@vue\runtime-core\dist\runtime-core.cjs.prod.js:2770:15)
at createComponentInstance (C:\Users\wahbe\Documents\GitHub\waelio.com\node_modules\.pnpm\@[email protected]\node_modules\@vue\runtime-core\dist\runtime-core.cjs.prod.js:5532:23)
at renderComponentVNode (C:\Users\wahbe\Documents\GitHub\waelio.com\node_modules\.pnpm\@[email protected][email protected]\node_modules\@vue\server-renderer\dist\server-renderer.cjs.prod.js:156:22)
at Object.ssrRenderComponent (C:\Users\wahbe\Documents\GitHub\waelio.com\node_modules\.pnpm\@[email protected][email protected]\node_modules\@vue\server-renderer\dist\server-renderer.cjs.prod.js:484:12)
at C:\Users\wahbe\Documents\GitHub\waelio.com\.vite-ssg-temp\main.js:645:30
at renderComponentSubTree (C:\Users\wahbe\Documents\GitHub\waelio.com\node_modules\.pnpm\@[email protected][email protected]\node_modules\@vue\server-renderer\dist\server-renderer.cjs.prod.js:222:13)
at renderComponentVNode (C:\Users\wahbe\Documents\GitHub\waelio.com\node_modules\.pnpm\@[email protected][email protected]\node_modules\@vue\server-renderer\dist\server-renderer.cjs.prod.js:173:16)
at Object.ssrRenderComponent (C:\Users\wahbe\Documents\GitHub\waelio.com\node_modules\.pnpm\@[email protected][email protected]\node_modules\@vue\server-renderer\dist\server-renderer.cjs.prod.js:484:12)
at _sfc_ssrRender$3 (C:\Users\wahbe\Documents\GitHub\waelio.com\.vite-ssg-temp\main.js:796:24)
ERROR Command failed with exit code 1.
Any ideas?
Thank you
I have a project with es modules enabled in the package.json.
// package.json
{
"name": "project",
"type": "module",
"dependencies: {
...
}
...
}
I ran the command vite-ssg build
and got the following errot: Error [ERR_REQUIRE_ESM]: Must use import to load ES Module
I figured out the problem is that the generated file in the .vite-ssg-temp folder is a common.js file with file ending .js
. I changed the file ending to .cjs
and it worked for me.
Also confirmed the same issue in latest vitesse.
version:
[vite-ssg] Build for server...
building for production...
"import.meta" is not available in the configured target environment and will be empty
13 | setup(__props) {
14 |
15 | if (import.meta.env.PROD) {
| ^
16 | // in prod mode, enable intersectionObserver based pre-fetch
17 | usePrefetch()
Hello!
Many thanks for this awesome and very minimalistic SSG Plugin for Vite!
What I'm currently missing is the ability to set an initial state when generating static HTML similar to frandiox/vite-ssr:
I am using Pinia as a store and these steps are necessary during building, so my fetched content from an API can stored in Pinia and injected into the generated HTML as an initial state to avoid unnecessary load times in production.
However, config functions like onBeforePageRender
or onPageRendered
do not help as I cannot get access to the app's context, or rather the pinia store from the Vue app.
Hi
I try to use "v-runtime-template" but I've this message:
=> Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js"
How can I do that ?
Try the example below and for all paths you will get the same initialstate. Seems it only uses the first one. I would expect for every page initialstate.data
to be the path of that page.
// src/main.ts
// ...
export const createApp = ViteSSG(
App,
{ routes },
({ app, router, routes, isClient, initialState, routePath }) => {
// ...
if (import.meta.env.SSR) {
initialState.data = routePath
} else {
console.log(initialState.data) // => { routePath :"/" }
}
// ...
}
)
I'm using the Vitesse boilerplate, but I am opening this issue here because there appears to be an intermittent issue with my builds in Amplify (it's just AWS CodeBuild under the hood).
TL;DR -
I was tinkering with this deployment so I could make a contribution to the vite-ssg documentation, to add a section for Amplify build/deployment under "Deploying A Static Site" for the vite-ssg docs.
I will intermittently get working builds, and then builds will break. On my end, I have literally not changed anything in the vitesse boilerplate. All I did was set up pnpm workspaces, and moved the frontend/client code into /packages/client
.
I added 1 new file (Amplify.ts) to /packages/client/src/modules
and its contents are very basic:
import { UserModule } from '~/types'
export const install: UserModule = ({ isClient /* router */ }) => {
// eslint-disable-next-line no-console
console.log('Is this a client?', isClient)
}
I can't understand why, but I will intermittently get the following errors during builds (my guess is that I'm missing something stupid/simple). I wonder if maybe something in vite-ssg's dependency graph is the real issue?
The build logs are below, and any help is much appreciated! :)
2021-07-20T23:08:31.240Z [INFO]: # Executing command: pnpm build:client
2021-07-20T23:08:31.534Z [INFO]: > [email protected] build:client /codebuild/output/src050096663/src/vitesse-two
> pnpm run build --filter @beepbeep/client
2021-07-20T23:08:31.855Z [INFO]: > @beepbeep/[email protected] build /codebuild/output/src050096663/src/vitesse-two/packages/client
> cross-env NODE_ENV=production vite-ssg build
2021-07-20T23:08:33.854Z [INFO]: [vite-ssg] Build for client...
2021-07-20T23:08:33.899Z [INFO]: vite v2.4.2 building for production...
2021-07-20T23:08:33.952Z [INFO]: transforming...
2021-07-20T23:08:36.304Z [INFO]: ✓ 162 modules transformed.
2021-07-20T23:08:36.668Z [INFO]: rendering chunks...
2021-07-20T23:08:38.825Z [INFO]: dist/index.html 1.13kb
2021-07-20T23:08:38.825Z [INFO]: dist/manifest.webmanifest 0.38kb
dist/ssr-manifest.json 17.25kb
2021-07-20T23:08:38.838Z [INFO]: dist/assets/about.0f8a0ec6.js 1.77kb / brotli: 0.59kb
2021-07-20T23:08:38.838Z [INFO]: dist/assets/README.f125e287.js 1.21kb / brotli: 0.43kb
2021-07-20T23:08:38.839Z [INFO]: dist/assets/virtual_pwa-register.e82f2316.js 5.37kb / brotli: 1.96kb
2021-07-20T23:08:38.841Z [INFO]: dist/assets/[name].f840e646.js 1.31kb / brotli: 0.68kb
2021-07-20T23:08:38.842Z [INFO]: dist/assets/[...all].3c74ba08.js 0.21kb / brotli: 0.16kb
2021-07-20T23:08:38.844Z [INFO]: dist/assets/home.be751833.js 0.36kb / brotli: 0.23kb
2021-07-20T23:08:38.845Z [INFO]: dist/assets/404.18e0b9fe.js 1.02kb / brotli: 0.52kb
2021-07-20T23:08:38.866Z [INFO]: dist/assets/app.19649441.js 19.29kb / brotli: 4.95kb
2021-07-20T23:08:38.882Z [INFO]: dist/assets/app.a6001449.css 18.18kb / brotli: 3.70kb
2021-07-20T23:08:39.070Z [INFO]: dist/assets/vendor.e6ca6862.js 133.44kb / brotli: 38.83kb
2021-07-20T23:08:42.381Z [INFO]: [vite-ssg] Build for server...
2021-07-20T23:08:42.434Z [INFO]: vite v2.4.2 building SSR bundle for production...
2021-07-20T23:08:42.477Z [INFO]: transforming...
2021-07-20T23:08:42.821Z [INFO]: ✓ 54 modules transformed.
2021-07-20T23:08:42.854Z [INFO]: rendering chunks...
2021-07-20T23:08:42.855Z [INFO]: .vite-ssg-temp/manifest.webmanifest 0.38kb
2021-07-20T23:08:42.855Z [INFO]: .vite-ssg-temp/main.js 78.16kb
.vite-ssg-temp/assets/style.96324cd4.css 21.78kb
2021-07-20T23:08:42.908Z [INFO]: Is this a client? false
2021-07-20T23:08:42.912Z [INFO]: [vite-ssg] Rendering Pages... (3)
2021-07-20T23:08:42.912Z [INFO]: Is this a client? false
2021-07-20T23:08:42.913Z [INFO]: Is this a client? false
2021-07-20T23:08:42.913Z [INFO]: Is this a client? false
2021-07-20T23:08:42.916Z [WARNING]: [Vue warn]: Server rendering context not provided. Make sure to only call useSSRContext() conditionally in the server build.
2021-07-20T23:08:42.917Z [WARNING]: TypeError: Cannot read property 'modules' of undefined
at _sfc_main$4.setup (/codebuild/output/src050096663/src/vitesse-two/packages/client/.vite-ssg-temp/main.js:1131:15)
at callWithErrorHandling (/codebuild/output/src050096663/src/vitesse-two/packages/client/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:119:22)
at setupStatefulComponent (/codebuild/output/src050096663/src/vitesse-two/packages/client/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:5631:29)
at setupComponent (/codebuild/output/src050096663/src/vitesse-two/packages/client/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:5612:11)
at renderComponentVNode (/codebuild/output/src050096663/src/vitesse-two/packages/client/node_modules/.pnpm/[email protected]_2361f5618aa0257c80cd75abba1fcee1/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:182:17)
at /codebuild/output/src050096663/src/vitesse-two/packages/client/node_modules/.pnpm/[email protected]_2361f5618aa0257c80cd75abba1fcee1/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:440:30
at Generator.next (<anonymous>)
at /codebuild/output/src050096663/src/vitesse-two/packages/client/node_modules/.pnpm/[email protected]_2361f5618aa0257c80cd75abba1fcee1/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:31:71
at new Promise (<anonymous>)
at __awaiter (/codebuild/output/src050096663/src/vitesse-two/packages/client/node_modules/.pnpm/[email protected]_2361f5618aa0257c80cd75abba1fcee1/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:27:12)
2021-07-20T23:08:43.122Z [WARNING]: [Vue warn]: Server rendering context not provided. Make sure to only call useSSRContext() conditionally in the server build.
2021-07-20T23:08:43.122Z [WARNING]: TypeError: Cannot read property 'modules' of undefined
at _sfc_main$4.setup (/codebuild/output/src050096663/src/vitesse-two/packages/client/.vite-ssg-temp/main.js:1131:15)
at callWithErrorHandling (/codebuild/output/src050096663/src/vitesse-two/packages/client/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:119:22)
at setupStatefulComponent (/codebuild/output/src050096663/src/vitesse-two/packages/client/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:5631:29)
at setupComponent (/codebuild/output/src050096663/src/vitesse-two/packages/client/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:5612:11)
at renderComponentVNode (/codebuild/output/src050096663/src/vitesse-two/packages/client/node_modules/.pnpm/[email protected]_2361f5618aa0257c80cd75abba1fcee1/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:182:17)
at /codebuild/output/src050096663/src/vitesse-two/packages/client/node_modules/.pnpm/[email protected]_2361f5618aa0257c80cd75abba1fcee1/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:440:30
at Generator.next (<anonymous>)
at /codebuild/output/src050096663/src/vitesse-two/packages/client/node_modules/.pnpm/[email protected]_2361f5618aa0257c80cd75abba1fcee1/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:31:71
at new Promise (<anonymous>)
at __awaiter (/codebuild/output/src050096663/src/vitesse-two/packages/client/node_modules/.pnpm/[email protected]_2361f5618aa0257c80cd75abba1fcee1/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:27:12)
[Vue warn]: Server rendering context not provided. Make sure to only call useSSRContext() conditionally in the server build.
TypeError: Cannot read property 'modules' of undefined
at _sfc_main$4.setup (/codebuild/output/src050096663/src/vitesse-two/packages/client/.vite-ssg-temp/main.js:1131:15)
at callWithErrorHandling (/codebuild/output/src050096663/src/vitesse-two/packages/client/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:119:22)
at setupStatefulComponent (/codebuild/output/src050096663/src/vitesse-two/packages/client/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:5631:29)
at setupComponent (/codebuild/output/src050096663/src/vitesse-two/packages/client/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:5612:11)
at renderComponentVNode (/codebuild/output/src050096663/src/vitesse-two/packages/client/node_modules/.pnpm/[email protected]_2361f5618aa0257c80cd75abba1fcee1/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:182:17)
at /codebuild/output/src050096663/src/vitesse-two/packages/client/node_modules/.pnpm/[email protected]_2361f5618aa0257c80cd75abba1fcee1/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:440:30
at Generator.next (<anonymous>)
at /codebuild/output/src050096663/src/vitesse-two/packages/client/node_modules/.pnpm/[email protected]_2361f5618aa0257c80cd75abba1fcee1/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:31:71
at new Promise (<anonymous>)
at __awaiter (/codebuild/output/src050096663/src/vitesse-two/packages/client/node_modules/.pnpm/[email protected]_2361f5618aa0257c80cd75abba1fcee1/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:27:12)
2021-07-20T23:08:43.156Z [INFO]: dist/about.html 1.05kb
2021-07-20T23:08:43.157Z [INFO]: dist/readme.html 1.05kb
dist/index.html 1.05kb
2021-07-20T23:08:43.158Z [INFO]: [vite-ssg] Build finished.
2021-07-20T23:08:43.231Z [INFO]: # Completed phase: build
2021-07-20T23:08:43.281Z [INFO]: ## Build completed successfully
2021-07-20T23:08:43.283Z [INFO]: # Starting caching...
2021-07-20T23:08:43.417Z [INFO]: # Creating cache artifact...
2021-07-20T23:10:38.123Z [INFO]: # Cache artifact is: 3475MB
2021-07-20T23:10:38.191Z [INFO]: # Uploading cache artifact...
2021-07-20T23:11:04.319Z [INFO]: # Caching completed
2021-07-20T23:11:04.409Z [INFO]: No custom headers found.
2021-07-20T23:11:04.478Z [INFO]: # Starting build artifact upload process...
2021-07-20T23:11:04.622Z [INFO]: # Build artifact is: 0MB
2021-07-20T23:11:04.623Z [INFO]: # Uploading build artifact '__artifacts.zip'...
2021-07-20T23:11:04.629Z [INFO]: # Build artifact is: 0MB
2021-07-20T23:11:04.629Z [INFO]: # Uploading build artifact '__artifactsHash.zip'...
2021-07-20T23:11:04.875Z [INFO]: # Build artifact upload completed
2021-07-20T23:11:04.876Z [INFO]: # Starting environment caching...
2021-07-20T23:11:04.876Z [INFO]: # Uploading environment cache artifact...
2021-07-20T23:11:04.974Z [INFO]: # Environment caching completed
Terminating logging...
What's weirder is that locally, on my machine, builds happen fast (BLAZING FAST), and they don't throw any errors.
╭─ armenr ~/Dev/bee/beep-vitesse-test-2 ✔ 10032 16:40:09
├─ staging ●
╰─ pnpm build:client
> [email protected] build:client /Users/armenr/Development/beep-beep-workspace/beep-vitesse-test-2
> pnpm run build --filter @beepbeep/client
> @beepbeep/[email protected] build /Users/armenr/Development/beep-beep-workspace/beep-vitesse-test-2/packages/client
> cross-env NODE_ENV=production vite-ssg build
[vite-ssg] Build for client...
vite v2.4.2 building for production...
✓ 127 modules transformed.
dist/index.html 1.13kb
dist/manifest.webmanifest 0.38kb
dist/ssr-manifest.json 12.39kb
dist/assets/about.ba52ffd2.js 1.77kb / brotli: 0.59kb
dist/assets/README.0e31c5dc.js 1.21kb / brotli: 0.43kb
dist/assets/virtual_pwa-register.e82f2316.js 5.37kb / brotli: 1.96kb
dist/assets/[...all].df64a62b.js 0.21kb / brotli: 0.16kb
dist/assets/[name].8ce75b88.js 1.31kb / brotli: 0.68kb
dist/assets/home.11b4a5ca.js 0.36kb / brotli: 0.23kb
dist/assets/404.fce372e5.js 1.02kb / brotli: 0.51kb
dist/assets/app.5af45db3.js 19.29kb / brotli: 4.94kb
dist/assets/app.a6001449.css 18.18kb / brotli: 3.70kb
dist/assets/vendor.5fa6cfab.js 108.49kb / brotli: 36.20kb
[vite-ssg] Build for server...
vite v2.4.2 building SSR bundle for production...
✓ 54 modules transformed.
.vite-ssg-temp/manifest.webmanifest 0.38kb
.vite-ssg-temp/main.js 78.16kb
.vite-ssg-temp/assets/style.96324cd4.css 21.78kb
Is this a client? false
[vite-ssg] Rendering Pages... (3)
Is this a client? false
Is this a client? false
Is this a client? false
dist/index.html 5.84kb
dist/about.html 6.74kb
dist/readme.html 5.83kb
[vite-ssg] Build finished.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @vueuse/[email protected]
npm ERR! node_modules/@vueuse/head
npm ERR! @vueuse/head@"0.6.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @vueuse/head@"^0.5.1" from [email protected]
npm ERR! node_modules/vite-ssg
npm ERR! dev vite-ssg@"^0.12.0" from the root project
Hi, @antfu
thanks for great stuff you are producing. I wanted to give a try to vite-ssg and tried it within vitesse.
I managed to build the project with vite-ssg build --script async
But then why I try to test dist folder with http-server
locally
I get this error:
[2021-02-09T19:07:30.754Z] "GET /assets/[...all].45055fa7.js" Error (404): "Not found"
I guess this is smth to do with handling catch-all routes specifically. Maybe, the issue with vite-plugin-pages
//cc @hannoeru
I am using the latest vitesse starter template for Vite (vite: 1.0.0-rc.13
, vite-ssg: 0.1.0
) and while a normal Vite build succeeds, the SSG build fails because I have code which uses optional chaining in it:
Now I do typically pin my node version to v12.x which does indeed does not support this feature but I tried pinning to Node 14 and got the same error. It is possible that I'm still not navigating some of the intricacies of Rush, PNPM, and Volta pinning but it failed too. I then changed my tsconfig.json
to target "ES2016" instead of "ESNEXT" to see if that might work but that too failed (maybe Vite always targets with ESNEXT features?).
I think at the least, this repo should state a warning in the README about which version of Node it expects but if there's anyway to navigate keeping a pin to Node 12 (at least until AWS upgrades to Node 14) this would be awesome as Node 12 is a safe config while if you're using Vite on frontend you're clearly targeting ES2020.
Hi, I just try the plugin and got these error
[vite-ssg] Build for server...
vite v2.0.5 building SSR bundle for production...
✓ 0 modules transformed.
Could not resolve entry module (src\main.ts).
Error: Could not resolve entry module (src\main.ts).
at error (my-app\node_modules\.pnpm\[email protected]\node_modules\rollup\dist\shared\rollup.js:5285:30)
at ModuleLoader.loadEntryModule (my-app\node_modules\.pnpm\[email protected]\node_modules\rollup\dist\shared\rollup.js:18440:20)
at async Promise.all (index 0) {
code: 'UNRESOLVED_ENTRY'
}
ERROR Command failed with exit code 1.
then I check the source, I found this
So, I try to add --entry=src/main.js
to my package.json
scripts
{
"scripts": {
"dev": "vite",
"build": "vite build",
- "generate": "cross-env NODE_ENV=production vite-ssg build",
+ "generate": "cross-env NODE_ENV=production vite-ssg build --entry=src/main.js",
"prepare": "husky install"
}
}
Would be nice to see it automatically detect the build entry
instead of we have to manually add it as argument.
Hey,
Thanks for making vite-ssg, it's pretty great!
However when I upgraded from 7.0 to 8.9 I'm getting an error (window not defined) when it builds for server, I dont recieve this error in 7.0 - I'm using vite version 2.0.1 and it still builds fine with 7.0.
I now get an error saying window is not defined. I can keep building in 7.0 but I'd like to use the includedRoutes feature pretty soon, have you got any suggestions please?
Also, it's a bit unrelated but I just wondered if you had any tips using vueuse/firebase in ssg? I keep getting an error about firebase-admin needing to be used for the server build?
Any help would be greatly appreciated!
Thanks again for vite-ssg!
throw error:“ReferenceError: default is not defined”
I have added the plugin @vitejs/plugin-vue-jsx.
vite.config.ts
import VueJsx from '@vitejs/plugin-vue-jsx'
export default defineConfig({
...
plugins: [VueJsx(), ...]
...
})
main.ts
import {ViteSSG} from 'vite-ssg/single-page'
import App from "./App";
export const createApp = ViteSSG(App)
App.tsx
import {defineComponent} from "vue";
export default defineComponent({
render: () => <div>hello</div>
})
Local build works fine, when pushing to vercel it explodes.
00:18:34.586 vite v2.4.1 building SSR bundle for production...
00:18:34.633 > node_modules/vite-tsconfig-paths/dist/index.js:103:40: error: [plugin: vite:dep-scan] viteResolve is not a function
https://github.com/calibur-tv/arthur
clone repo
yarn install
yarn workspace core build
yarn workspace core build
[vite-ssg] Build for client...
vite v2.0.2 building for production...
✓ 18 modules transformed.
dist/index.html 0.47kb
dist/ssr-manifest.json 1.45kb
dist/assets/index.84deefdb.js 0.14kb / brotli: 0.11kb
dist/assets/about.b281ebe7.js 0.14kb / brotli: 0.10kb
dist/assets/app.63e62a7a.css 0.16kb / brotli: 0.10kb
dist/assets/app.6e05f1be.js 2.13kb / brotli: 1.01kb
dist/assets/vendor.a9bc8345.js 68.26kb / brotli: 23.85kb
[vite-ssg] Build for server...
vite v2.0.2 building SSR bundle for production...
✓ 6 modules transformed.
.vite-ssg-temp/main.js 4.08kb
.vite-ssg-temp/assets/style.20813ca4.css 0.20kb
ReferenceError: window is not defined
at useHistoryStateNavigation (/Users/yuistack/Documents/calibur/arthur/node_modules/vue-router/dist/vue-router.cjs.js:501:35)
at Object.createWebHistory (/Users/yuistack/Documents/calibur/arthur/node_modules/vue-router/dist/vue-router.cjs.js:593:31)
at Module.<anonymous> (/Users/yuistack/Documents/calibur/arthur/packages/core/.vite-ssg-temp/main.js:65:22)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at build (/Users/yuistack/Documents/calibur/arthur/node_modules/vite-ssg/dist/node/cli.js:134:23)
When use vite build --mode staging
or npm run build -- --mode staging
everything works find.
But when change build
in package.json to vite-ssg build
or use vite-ssg build --mode staging
the mode alway production.
Cannot start npm scripts on windows platform: it is using cp
linux command.
I'll make a PR in a few minutes.
demo: https://github.com/tshemeng/test_vitesse
vite build
works but vite-ssg build
failed.
vite-ssg build
output
[vite-ssg] Build for server...
building SSR bundle for production...
✓ 45 modules transformed.
.vite-ssg-temp/manifest.webmanifest 0.38kb
.vite-ssg-temp/registerSW.js 0.13kb
.vite-ssg-temp/main.js 64.29kb
.vite-ssg-temp/assets/style.f249232f.css 21.64kb
E:\test_vitesse\node_modules\.pnpm\[email protected]\node_modules\rpc-websockets\build-ts\index.browser.js:2
import WebSocketBrowserImpl from "./lib/client/websocket.browser";
^^^^^^
SyntaxError: Cannot use import statement outside a module
at wrapSafe (internal/modules/cjs/loader.js:979:16)
at Module._compile (internal/modules/cjs/loader.js:1027:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Module.<anonymous> (E:\test_vitesse\.vite-ssg-temp\main.js:12:21)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
ERROR Command failed with exit code 1.
Is the plan for this plugin to remain vue
specific? I'd love to have the same support with react
if possible. But I also know that it's probably a lot of work and if that's not what your direction is for this plugin, I completely understand.
I want to add https://github.com/craigbuckler/progressive-image.js to my vite-ssg app and do this by adding
import 'progressive-image.js/dist/progressive-image.js'
import 'progressive-image.js/dist/progressive-image.css'
to the main.ts
. On Build for server... i get ReferenceError: window is not defined.
I used vitesse as base and know it's possible to create a module. But i cannot import the two resources in a isClient if clause.
Is there any way to import these resources only on client generation only?
[vite-ssg] Build for server...
building SSR bundle for production...
✓ 50 modules transformed.
.vite-ssg-temp/manifest.webmanifest 0.38kb
.vite-ssg-temp/registerSW.js 0.13kb
.vite-ssg-temp/main.js 74.48kb
.vite-ssg-temp/assets/style.824805e5.css 29.26kb
ReferenceError: window is not defined
at useHistoryStateNavigation (C:\_Franck\vite01\node_modules\.pnpm\[email protected][email protected]\node_modules\vue-router\dist\vue-router.cjs.js:502:35)
at Object.createWebHistory (C:\_Franck\vite01\node_modules\.pnpm\[email protected][email protected]\node_modules\vue-router\dist\vue-router.cjs.js:594:31)
at Module.<anonymous> (C:\_Franck\vite01\.vite-ssg-temp\main.js:2801:22)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at build (C:\_Franck\vite01\node_modules\.pnpm\[email protected]_09776a6a773b9a81449cdda32cab3c64\node_modules\vite-ssg\dist\node\cli.js:134:23)
ERROR Command failed with exit code 1.
export const createApp = ViteSSG(
App,
{
routes,
history: createWebHistory('dist')
},
(ctx) => {
// install all modules under `modules/`
Object.values(import.meta.globEager('./modules/*.ts')).map(i => i.install?.(ctx))
},
)
In the vitesse-ssr example for vite-ssr, they have a path based i18n.
for example, try
https://vitesse-ssr.vercel.app/vi/
and
https://vitesse-ssr.vercel.app/tr/
How can one achieve the same with vite-ssg. In fact that would be very nice to add to vitesse as well.
Thanks
Describe the bug/issue
add the @vue/apollo-composable: https://v4.apollo.vuejs.org/guide-composable/setup.html
pnpm run build
cause the following error
ReferenceError: define is not defined
at Object.<anonymous> (app/node_modules/.pnpm/registry.nlark.com/@vue/[email protected]_a8f1dfa507b9f65e6b5e71908ade3ac8/node_modules/@vue/apollo-composable/dist/vue-apollo-composable.js:48:1)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Module.<anonymous> (/Users/lyman/Desktop/opsk/web-app/.vite-ssg-temp/main.js:35:24)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
ERROR Command failed with exit code 1.
I think it's the problem that while the vite-ssg try to use the /@vue/apollo-composable/dist/vue-apollo-composable.js file that it include the define symbol
can reproduce by clone this repo and pnpm build : https://github.com/lymanlai/vue-apollo-build-error
I want to have my custom id for my entry div instead of id 'app', but it seems that it was hard coded. However, there is an attribute called 'rootContainer' in options which can specific the entry id for client build but does not work in ssr/ssg build, which is pretty tricky.
Hope that vite-ssg could support such feature. Thanks.
Firstly, thanks for working on this library!
I wondered if there were any plans for supporting pre-populating/fetching data prior to SSG, functionality similar to Nuxt's fetch hook? Perhaps it's already possible or outside the scope of this library.
Hi!! I think it's really awesome to have SSG on Vite, thanks for your work.
One thing I would love to have is not to require Vue Router by default. I'm building a complex Landing Page site with multiple components, but it's only one page, so I don't use Vue Router.
Now, if I don't have installed Vue Router or I don't have routes configured it's failing. Could this be optional?
Thanks again!
I integrated some PrimeVue components/icons + Headless UI + Pinia into my project (based on Vitesse ❤️, from the multi-page + store example).
I am now seeing a warning during SSG builds: [@vue/server-renderer] Teleport is missing target prop.
Does vite-ssg have a way to provide any traces or logging for what, exactly, is the cause of this compile-time/render-time warning? If not, should there be? If not, how can I figure out what's causing this at build time (just so I can test to make sure nothing's actually broken/buggy)?
I'm also wondering if it is normal/expected behavior to see those "Initialize user..." messages 5 times in the build logs
Thank you!
Build logs below:
[vite-ssg] Build for server...
vite v2.4.4 building SSR bundle for production...
✓ 548 modules transformed.
.vite-ssg-temp/manifest.webmanifest 0.38kb
.vite-ssg-temp/main.js 466.29kb
.vite-ssg-temp/assets/style.069c5400.css 218.31kb
Initialize user ...
BLEEGS!!
[vite-ssg] Rendering Pages... (5)
Initialize user ...
Initialize user ...
Initialize user ...
Initialize user ...
Initialize user ...
[Vue warn]: [@vue/server-renderer] Teleport is missing target prop.
dist/about.html 13.98kb
dist/readme.html 13.07kb
dist/directory.html 42.99kb
dist/calendar.html 12.21kb
dist/index.html 13.07kb
[vite-ssg] Build finished.
Obviously useRoute()
returns nothing.
But there must be a way to know which route is being generated from inside of serverPrefetch()
.
Which is the recommended way?
Thanks
I just tried using it on vitesse template with useTitle function. The title changes didn't applied to html
output. I have tried using vue-composable's useTitle function. but didn't work too.
Also tried using portals, no luck.
<teleport to="head">
<title>New Title</title>
</teleport>
Hello
My build succeeds but does not exit. Kinda hangin.
# Environment
$ pnpm -v
6.7.6
$ node -v
v16.0.0
Windows 10
To reproduce:
pnpm build
Expected
Exiting build process after completion, but it does not.
Result After command locally
[vite-ssg] Build for client...
vite v2.3.7 building for production...
✓ 254 modules transformed.
dist/index.html 1.56kb
dist/manifest.webmanifest 0.39kb
dist/ssr-manifest.json 39.03kb
dist/assets/virtual_pwa-register.cfcd7e2b.js 0.57kb / brotli: 0.32kb
dist/assets/[...all].6802bd45.js 0.22kb / brotli: 0.17kb
dist/assets/timeline.fcca43f1.js 1.19kb / brotli: 0.57kb
dist/assets/index.d6f56c2f.js 3.72kb / brotli: 1.12kb
dist/assets/terms.2181aee9.js 10.52kb / brotli: 2.80kb
dist/assets/privacy.df4482c2.js 13.82kb / brotli: 2.19kb
dist/assets/index.4de370db.js 5.14kb / brotli: 1.45kb
dist/assets/contact.c51e592b.js 4.54kb / brotli: 1.56kb
dist/assets/about.8f0e4987.js 0.66kb / brotli: 0.28kb
dist/assets/home.4d426a09.js 0.50kb / brotli: 0.30kb
dist/assets/404.dca62e88.js 1.01kb / brotli: 0.51kb
dist/assets/index.b25c940d.css 0.22kb / brotli: 0.10kb
dist/assets/contact.202d630b.css 1.02kb / brotli: 0.30kb
dist/assets/app.777cd524.js 24.81kb / brotli: 7.26kb
dist/assets/app.d5ba3325.css 19.00kb / brotli: 3.98kb
dist/assets/vendor.a8def4eb.js 277.22kb / brotli: 81.81kb
[vite-ssg] Build for server...
vite v2.3.7 building SSR bundle for production...
✓ 66 modules transformed.
.vite-ssg-temp/manifest.webmanifest 0.39kb
.vite-ssg-temp/main.js 152.01kb
.vite-ssg-temp/assets/style.02cce71f.css 24.45kb
[vite-ssg] Rendering Pages... (6)
dist/index.html 8.45kb
dist/terms.html 18.67kb
dist/contact.html 11.64kb
dist/privacy.html 21.80kb
dist/about.html 10.02kb
dist/timeline.html 15.50kb
[vite-ssg] Build finished.
# It never exists.!
Same output on netlify, I can paste it here is needed.
This my package.json
// package.json
"dependencies": {
"@feathersjs/adapter-commons": "^4.5.11",
"@feathersjs/authentication-client": "^4.5.11",
"@feathersjs/feathers": "^4.5.11",
"@feathersjs/socketio-client": "^4.5.11",
"@vitejs/plugin-vue-jsx": "^1.1.5",
"@vueuse/core": "^4.11.2",
"@vueuse/head": "^0.5.1",
"feathers-hooks-common": "^5.0.6",
"feathers-pinia": "^0.12.9",
"fs.promises": "^0.1.2",
"js-cookie": "^2.2.1",
"moment": "^2.29.1",
"nprogress": "^0.2.0",
"path": "^0.12.7",
"pinia": "^2.0.0-beta.2",
"prism-theme-vars": "^0.2.2",
"socket.io-client": "^2.0.0",
"vue": "^3.0.11",
"vue-i18n": "^9.1.6",
"vue-property-decorator": "^9.1.2",
"vue-router": "^4.0.8"
},
"devDependencies": {
"@antfu/eslint-config": "^0.6.5",
"@iconify/json": "^1.1.353",
"@intlify/vite-plugin-vue-i18n": "^2.2.0",
"@types/nprogress": "^0.2.0",
"@typescript-eslint/eslint-plugin": "^4.26.0",
"@vitejs/plugin-vue": "^1.2.3",
"@vue/compiler-sfc": "^3.0.11",
"@vue/server-renderer": "^3.0.11",
"@windicss/plugin-animations": "^1.0.9",
"cross-env": "^7.0.3",
"eslint": "^7.28.0",
"https-localhost": "^4.6.5",
"markdown-it-prism": "^2.1.6",
"pnpm": "^6.7.1",
"scss": "^0.2.4",
"typescript": "^4.3.2",
"vite": "^2.3.7",
"vite-plugin-components": "^0.10.4",
"vite-plugin-icons": "^0.6.1",
"vite-plugin-md": "^0.6.7",
"vite-plugin-pages": "^0.12.2",
"vite-plugin-pwa": "^0.7.3",
"vite-plugin-vue-layouts": "^0.3.1",
"vite-plugin-windicss": "^0.16.7",
"vite-ssg": "^0.11.2",
"vue-tsc": "^0.1.7"
}
Thanks you
How would I support making a directive client-side-only? I like how much this library simplifies things, but I'm not really sure how to get something like v-t
working. Currently trying to use it results in SyntaxError: Custom directive is missing corresponding SSR transform and will be ignored.
There are docs about how to fix this, but they don't really make sense in the context of vite-ssg
Since 0.11.0
the HTML generated for pages always equals index.html
Reproduction:
pnpm example:build
examples/multiple-pages/dist/a.html
and ./dist/b.html
will be the same as ./dist/index.html
.
The same happens if you do
npx degit antfu/vitesse ssg-issue-47
cd ssg-issue-47
pnpm i
pnpm build
I'm watching your plugin everything works pretty well, a little issue in dev server, I cannot get nested pages.
Other thing, when the app run in HTTP server it redirects just in JS(like spa) and not like proper SSG.
Also, when I tried to build threw me a following error.
TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
at Function.from (<anonymous>)
at renderPreloadLinks (/project/node_modules/vite-ssg/dist/node/cli.js:17:9)
I have to add default value to modules = []
param in renderPreloadLinks
function
reproduction link
I hope you can answer me!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.