includeAssetsImportedByServer

⚠ This config is experimental.

By default, static assets (CSS, images, ...) imported only by server code are missing in the client production bundle (i.e. /dist/client/assets/).

A workaround is to make sure that all assets are imported at least once from client code. For example:

// /renderer/_default.page.server.js
// Environment: Node.js

// If we were to import logo.svg only in this file, then `logoUrl` would be
// `undefined` in production.
import logoUrl from './logo.svg'

export function render() {
  return escapeInject`<html>
    <head>
      <!-- Favicon -->
      <link rel="icon" href="${logoUrl}" />
    </head>
    <!-- ... -->
  </html>`
}
// /renderer/_default.page.client.js
// Environment: Browser

// Workaround: we import logo.svg here as well, even though we don't use it in this file,
// to make Vite include logo.svg in the client bundle.
import './logo.svg'

While this workaround works fine for most app, it is cumbersome for HTML-only apps.

Instead of using this workaround, we can set includeAssetsImportedByServer to true.

Because it is experimental, we recommend to use includeAssetsImportedByServer only for HTML-only apps.

For example:

// /**/*.page.server.js
// Environment: Node.js

// This file is loaded *only* in Node.js

// We need to set `includeAssetsImportedByServer` to `true` if we want
// `some-style.css` to be included, otherwise it will be ignored.
import './some-style.css'

// Same for other static assets such as images, fonts, etc.
import imageUrl from './some-image.svg'

// Prints `undefined` if `includeAssetsImportedByServer` isn't `true`.
console.log(imageUrl)
// vite.config.js

import { ssr } from 'vite-plugin-ssr/plugin'

export default {
  plugins: [
    ssr({
      includeAssetsImportedByServer: true
    })
  ]
}