vitejs/vite · error · Error

" } is not supported for assets in files

Error message

{ runtime: "${result.runtime}" } is not supported for assets in ${hostType} files: ${filename}

What it means

experimental.renderBuiltUrl can return { runtime: '...' } to emit a runtime-resolved URL, but only for references inside JS modules. toOutputFilePathWithoutRuntime (also aliased for CSS and HTML) rejects a runtime result for asset/public files referenced from css or html hosts because those hosts have no runtime expression channel.

Solutions

For css/html hosts, return a plain string URL or { relative: boolean } from renderBuiltUrl instead of { runtime }.
Branch on the hostType argument passed to renderBuiltUrl and only return runtime for hostType === 'js'.
Move the asset reference into JS so runtime resolution is available.

Example fix

// before
renderBuiltUrl: (filename, { hostType }) => ({ runtime: `new URL(${JSON.stringify(filename)}, import.meta.url)` })
// after
renderBuiltUrl: (filename, { hostType }) =>
  hostType === 'js'
    ? { runtime: `new URL(${JSON.stringify(filename)}, import.meta.url)` }
    : filename

Defensive patterns

Strategy: validation

Validate before calling

function safeRenderBuiltUrl(fn) {
  return (filename, ctx) => {
    const r = fn(filename, ctx);
    if (r && typeof r === 'object' && r.runtime && ctx.hostType !== 'js') {
      return filename; // downgrade non-JS hosts to plain string
    }
    return r;
  };
}

Type guard

function isRuntimeResult(r, hostType) {
  return Boolean(r && typeof r === 'object' && 'runtime' in r && hostType === 'js');
}

Prevention

Branch experimental.renderBuiltUrl on hostType; only return { runtime } for JS.
Return plain strings or { relative } for css/html references.

When it happens

Trigger: Implementing experimental.renderBuiltUrl and returning { runtime: 'import.meta...' } for a filename whose hostType is 'css' or 'html' (i.e. url() in CSS or <script>/<link> in HTML).

Common situations: Custom asset-URL rewriting plugins ported from a JS-only context; trying to make HTML/CSS references use import.meta.url which does not exist there.

Related errors

AI-assisted analysis of vitejs/vite@b4d66fee14 (2026-08-11). Data as JSON: /api/errors/9c54ef6e45e56b9b. Report an issue: GitHub.

Appendix: source

Thrown at packages/vite/src/node/build.ts:1719

  filename: string,
  type: 'asset' | 'public',
  hostId: string,
  hostType: 'js' | 'css' | 'html',
  config: ResolvedConfig,
  toRelative: (filename: string, hostId: string) => string,
): string {
  const { renderBuiltUrl } = config.experimental
  let relative = config.base === '' || config.base === './'
  if (renderBuiltUrl) {
    const result = renderBuiltUrl(filename, {
      hostId,
      hostType,
      type,
      ssr: !!config.build.ssr,
    })
    if (typeof result === 'object') {
      if (result.runtime) {
        throw new Error(
          `{ runtime: "${result.runtime}" } is not supported for assets in ${hostType} files: ${filename}`,
        )
      }
      if (typeof result.relative === 'boolean') {
        relative = result.relative
      }
    } else if (result) {
      return result
    }
  }
  if (relative && !config.build.ssr) {
    return toRelative(filename, hostId)
  } else {
    return joinUrlSegments(config.decodedBase, filename)
  }
}

export const toOutputFilePathInCss: typeof toOutputFilePathWithoutRuntime =

View on GitHub (pinned to b4d66fee14)