vitesse + vite-ssg errors

[athisun]

I'm testing out @vuetify/[email protected], but I experienced 2 errors when trying to use it alongside SSG with vite-ssg. I managed to resolve these issues while writing the bug report, so I'll submit only as a reference for others.

Example repo: https://github.com/athisun/vitesse-vuetify

The first issue I had was importing styles using the syntax in the README. Running pnpm build (pnpx vite-ssg build) fails with this error:

[vite-ssg] Build for server...
vite v2.6.2 building SSR bundle for production...
✓ 71 modules transformed.
.vite-ssg-temp/manifest.webmanifest        0.38 KiB
.vite-ssg-temp/main.js                     76.29 KiB
.vite-ssg-temp/assets/style.ca71f482.css   367.35 KiB
/Projects/vitesse-vuetify/node_modules/.pnpm/[email protected][email protected]/node_modules/vuetify/lib/styles/main.css:1
@charset "UTF-8";
^

SyntaxError: Invalid or unexpected token
    at compileFunction (<anonymous>)
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)
    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 Module.<anonymous> (/Projects/vitesse-vuetify/.vite-ssg-temp/main.js:37:1)

Solution
Importing the sass file instead of the styles directory resolves the charset issue, but I'm not sure if there's any config I should change to support the latter.

// modules/vuetify.ts
- import 'vuetify/styles';
+ import 'vuetify/styles/main.sass';

---

The second issue was the build process failing after running a dev server, even though it works from a freshly cloned repo. The reported error was related to the vuetify-loader runtime:

[vite-ssg] Build for server...
vite v2.6.2 building SSR bundle for production...
✓ 72 modules transformed.
.vite-ssg-temp/manifest.webmanifest        0.38 KiB
.vite-ssg-temp/main.js                     76.28 KiB
.vite-ssg-temp/assets/style.d55348d2.css   659.65 KiB
/Projects/vitesse-vuetify/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vuetify/loader-shared/runtime.js:1
export function installAssets (component, type, assets) {
^^^^^^

SyntaxError: Unexpected token 'export'
    at compileFunction (<anonymous>)
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)
    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 Module.<anonymous> (/Projects/vitesse-vuetify/.vite-ssg-temp/main.js:44:15)

Reproduction steps:

1. Clone example repo

2. Observe building with pnpm build (pnpx vite-ssg build) works

3. Observe previewing the generated site with pnpm preview-https (pnpx serve dist) works, complete with vuetify by navigating to https://localhost/vuetify

4. Run the development server pnpm dev (pnpx vite) and navigate to http://localhost:3000/vuetify to trigger vite's dependency resolution, which will add references to @vuetify/loader-shared/runtime in node_modules/.pnpm/@[email protected][email protected]/node_modules/@vuetify/loader-shared/dist/imports/getImports.js

   16:12:32 [vite] new dependencies found: @vuetify/loader-shared/runtime, vuetify/lib/components/VGrid/index.mjs, vuetify/lib/components/VImg/index.mjs, updating...

5. Observe building with pnpm build (pnpx vite-ssg build) fails

Solution
The issue above seems to be caused by vite attempting to optimise the vuetify-loader runtime. Excluding the package resolves the issue (https://vitejs.dev/config/#optimizedeps-exclude). I've excluded vuetify as well, but I'm unsure if this is best practice.

// vite.config.ts
export default defineConfig({
  ...
  optimizeDeps: {
    exclude: [
      '@vuetify/loader-shared/runtime',
      'vuetify',
    ],
  },
})

If you still experience the issue after excluding the runtime, clear the vite cache by running:

rm -r node_modules/.vite

[KaelWD]

Invalid or unexpected token

This looks like vite is keeping the style import in the ssr build, so node tries to run it as js. IDK why that works if you change it to sass, might be a vite bug with package exports.

[athisun]

This looks like vite is keeping the style import in the ssr build, so node tries to run it as js. IDK why that works if you change it to sass, might be a vite bug with package exports.

@KaelWD Is it possible to keep this issue open or to create a new issue to track the styles import issue?

[KaelWD]

This is definitely a bug with either vite or vite-ssg. import 'vuetify/styles' results in require('vuetify/styles') in .vite-ssg-temp/main.js, but replacing it with the real path import 'vuetify/lib/styles/main.css' doesn't.