v-bind not working with computed properties

[Ragura]

Minimal Reproducible Example: https://stackblitz.com/edit/vite-qjxpzz?file=docs%2FHelloWorld.vue (run vitepress build docs)

---

Describe the bug

I just had a live Vitepress site hosted on Netlify, using Vitepress 0.20.4 (EDIT: it's now at 1.0.0 alpha 4), fail a build with only content having changed. The site is publicly available on Github for reproduction: https://github.com/Ragura/dinkcreference.

Using pnpm docs:build command I get:

✓ building client + server bundles...
✖ rendering pages...
build error:
 ReferenceError: _unref is not defined
    at /Users/me/development/dinkcreference/node_modules/.pnpm/vitepress@0.20.4/node_modules/vitepress/dist/client/app/temp/app.js:1646:23
    at renderComponentSubTree (/Users/me/development/dinkcreference/node_modules/.pnpm/@vue+server-renderer@3.2.37_vue@3.2.37/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:250:13)
    at renderComponentVNode (/Users/me/development/dinkcreference/node_modules/.pnpm/@vue+server-renderer@3.2.37_vue@3.2.37/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:185:16)
    at Object.ssrRenderComponent (/Users/me/development/dinkcreference/node_modules/.pnpm/@vue+server-renderer@3.2.37_vue@3.2.37/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:605:12)
    at _sfc_ssrRender (/Users/me/development/dinkcreference/node_modules/.pnpm/vitepress@0.20.4/node_modules/vitepress/dist/client/app/temp/functions_set-font-color.md.js:25:24)
    at renderComponentSubTree (/Users/me/development/dinkcreference/node_modules/.pnpm/@vue+server-renderer@3.2.37_vue@3.2.37/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:250:13)
    at renderComponentVNode (/Users/me/development/dinkcreference/node_modules/.pnpm/@vue+server-renderer@3.2.37_vue@3.2.37/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:185:16)
    at renderVNode (/Users/me/development/dinkcreference/node_modules/.pnpm/@vue+server-renderer@3.2.37_vue@3.2.37/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:292:22)
    at renderVNodeChildren (/Users/me/development/dinkcreference/node_modules/.pnpm/@vue+server-renderer@3.2.37_vue@3.2.37/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:307:9)
    at renderElementVNode (/Users/me/development/dinkcreference/node_modules/.pnpm/@vue+server-renderer@3.2.37_vue@3.2.37/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:358:17)

It is not using any outside packages, just pure Vitepress with Docsearch enabled.
If I run dev/serve commands, it works just fine locally. Only when building does it fail. Any idea what could be causing this?

Reproduction

Clone https://github.com/Ragura/dinkcreference.
Run pnpm docs:build

Expected behavior

It should build, but fails.

System Info

System:
    OS: macOS 12.3
    CPU: (10) arm64 Apple M1 Pro
    Memory: 86.88 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 17.0.1 - ~/.nvm/versions/node/v17.0.1/bin/node
    npm: 8.13.1 - ~/.nvm/versions/node/v17.0.1/bin/npm
  Browsers:
    Chrome: 103.0.5060.53
    Safari: 15.4

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[xfq]

I cannot reproduce this using https://github.com/Ragura/dinkcreference :

➜  dinkcreference git:(main) ✗ pnpm docs:build

> dinkcreference@0.1.0 docs:build /Users/xfq/test/vuejs-testing/dinkcreference
> vitepress build docs

vitepress v0.20.4
✓ building client + server bundles...
✓ rendering pages...
build complete in 6.41s.
➜  dinkcreference git:(main) ✗ cd docs/.vitepress/dist
➜  dist git:(main) ✗ http-server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
::1 - - [29/Jun/2022 15:40:27] "GET / HTTP/1.1" 200 -

I'm using Node 16 and pnpm 7.2.1.

[brc-dd]

I am not able to reproduce this either. Are you sure you have pushed your latest code to GitHub? Also please try using latest alpha releases, we have fixed a lot of bugs since 0.x.

[Ragura]

The latest code is on Github. However, I now also updated to 1.0 alpha 4 and migrated a few settings (not all yet). The site works locally again, but still fails to build. It's not just my machine that doesn't want to build it, Netlify fails its deploy as well with the same error during build.

[brc-dd]

There is some issue with v-bind in your ColorBlock component.

[Ragura]

There is some issue with v-bind in your ColorBlock component.

Thanks for pointing out the source of the issue, although it is still quite strange. I am using v-bind inside the CSS block, which is allowed as per the Vue documentation: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css

<style scoped>
  .colorblock {
    ...
    background-color: v-bind(backgroundColor);
    ...
  }
</style>

It works fine when running the site in dev mode, but it is indeed the culprit that makes the build fail. Removing the v-bind inside the style block makes the build pass. I changed the code around to not have to use v-bind inside the css block, but I am very curious why this has suddenly started causing issues when it didn't before. Is it due to a version change of a package in the Vitepress nested dependencies?

In any case, I have to really thank you for finding the root cause of the issue. I am very curious how you came to that conclusion by the way. How did you debug it?

[brc-dd]

although it is still quite strange

Yeah probably some bug with VP or its deps. We'll look into that. It is happening only with computed properties, refs are working fine with v-bind.

How did you debug it?

Refer this: https://stackoverflow.com/help/mcve

"Divide and conquer. If you’re not sure what the source of the problem is, start removing code a bit at a time until the problem disappears – then add the last part back."

[Ragura]

Ah, I see. Thank you for taking the time and trouble to assist with this issue, it's much appreciated! I'll keep the issue open in case you want to track it for the bug. Feel free to close it if not needed.

[brc-dd]

I'm closing this here as it is a bug with Vue itself. Track vuejs/core#6201 for updates.