v-bind in SSR with dev server fails to resolve imported objects

bcdanieldickison commented 5 months ago

Vue version

3.4.31

Link to minimal reproduction

Steps to reproduce

When rendering SSR inside of the vite dev server with vite.ssrLoadModule, v-bind inside of <style> fails when referencing an import-ed object from <script setup>. Simply assigning the object to a new const at the script scope works around the issue, as does doing a production SSR build.

App.vue:

<script setup lang="ts">
import Color from './Color'
const C = Color
</script>

<template>
  <h1>Hello</h1>
</template>

<style>
h1 {
  /* this fails: */
  color: v-bind("Color.red");

  /* this works: */
  /* color: v-bind("C.red"); */
}
</style>

ssr-fail.js:

import { exit } from 'process'
import { createServer as createViteServer } from 'vite'

const vite = await createViteServer({
  server: { middlewareMode: true },
  appType: 'custom'
})
const { render } = await vite.ssrLoadModule('/src/entry-server.js')
const appHtml = await render('/')
console.log(appHtml)
exit(0)

What is expected?

$ npm test
<h1 style="--7a7a37b1-C\.red:#ff00ee;">Hello</h1>

What is actually happening?

$ npm run test
/Users/daniel/bc/src/ssr-test/src/App.vue:26
    "--7a7a37b1-Color\\.red": $setup.Color.red
                                           ^

TypeError: Cannot read properties of undefined (reading 'red')

System Info

System:
    OS: macOS 14.4.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 1.50 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.7.2 - /opt/homebrew/bin/node
    npm: 10.8.1 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 126.0.6478.127
    Safari: 17.4.1
    Safari Technology Preview: 18.0
  npmPackages:
    vue: ^3.4.29 => 3.4.31

Any additional comments?

We maintain a design-system module with various constants for color tokens. The most natural way to use these in our app components leads to this error in our dev environment.

skirtles-code commented 5 months ago

This problem does seem to be reproducible using the Playground in SSR mode:

Playground

bcdanieldickison commented 5 months ago

This problem does seem to be reproducible using the Playground in SSR mode:

Thanks! I didn't notice there was an option to enable dev-mode SSR rendering in the playground. I'll add a link to the description.

codethief commented 2 months ago

This has bitten us multiple times in the past month. While there is a workaround, that doesn't really scale well if you have dozens of v-binds per component (e.g. for theming purposes).

vuejs / core