using useHead() in pages fails in ssg build step

[cezarneaga]

Hi there,

i couldnt find an answer in the example here, docs or elsewhere in the vite-ssg. trying my luck here as i think it may be related to "file based routing" ???

i am using useHead() in a page's <script setup> section. on build for server step i get this error:

.vite-ssg-temp/main.js                     545.77 KiB
Error: You may forget to apply app.use(head)
    at injectHead (.../node_modules/.pnpm/@[email protected][email protected]/node_modules/@vueuse/head/dist/index.js:127:11)
    at Object.useHead (.../node_modules/.pnpm/@[email protected][email protected]/node_modules/@vueuse/head/dist/index.js:317:16)
    at Module.<anonymous> (.../.vite-ssg-temp/main.js:9872:6)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153: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)
    at build (.../node_modules/.pnpm/[email protected]_387c7a65fb810fc8b5f7093a45d54150/node_modules/vite-ssg/dist/node/cli.js:172:52)
 ELIFECYCLE  Command failed with exit code 1.

am i doing it wrong or just misusing the functionality?
the usage in App.vue succeeds.

appreciate any pointers. will submit a docs PR if i find a solution.
thanks,
C

[maxweld]

Probably related, I am getting the following dependency issue when running 'npm install' after a fresh download (degit).

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.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.15.6" 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.

[cezarneaga]

Probably related, I am getting the following dependency issue when running 'npm install' after a fresh download (degit).

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.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.15.6" 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.

are you using pnpm?
this doesnt look related to me

[maxweld]

I was using npm, not pnpm.

[thuongtruong1009]

@maxweld , @cezarneaga !

In this template, @antfu was config modules with pnpm and you only need to code step by step follow him.

• pnpm is similar to npm, but pnpm has a better package and cache management. Theoretically, it's similar to npm.
• example: When you want to install something.....
  • With npm, you would type npm install somethings...
  • As for pnpm, you just need to add a p in front of npm. The result is pnpm install somethings...
• you should use pnpm for the benefits of them.
• You can type npm i -g pnpm before clone template and pnpm install after clone template.
• To run a local server, typing pnpm dev. The web app will deploy at localhost:3333
• Hope it helps you!
• If can, you can mark it as an answer in discussion for another guy to know about this (set category is Q&A).
• Thank you!

[cezarneaga]

i am using pnpm.

[ffrechina]

same problem here