500 _unref is not defined

[denisales]

Environment

---

• Operating System: Linux
• Node Version: v16.16.0
• Nuxt Version: 3.0.0-rc.8
• Package Manager: yarn@1.22.19
• Builder: vite
• User Config: typescript, srcDir, dir
• Runtime Modules: -
• Build Modules: -

---

Reproduction

Describe the bug

When using a computed propeties in a component, I get the error "500
_unref is not defined" when running yarn build, yarn preview.

Additional context

No response

Logs

No response

[danielroe]

Can you see what the line of code in the terminal is referring to? Would you provide a reproduction? 🙏

[stanislavpodolia]

Same problem for me, any v-bind in css causes this.
Nuxt Version: 3.0.0-rc.8

<script setup lang="ts">
const mixMode = computed(() => useState('mixMode', () => 'none').value);
</script>
<style lang="scss">
header {
  mix-blend-mode: v-bind(mixMode);
}
</style>

Runs fine in dev mode, but proper build gives "500 _unref is not defined"
When compiled code looks like this

const _cssVars = { style: {
        "--281e1430": _unref(mixMode)
      } };

And _unref is never imported and this is the only place it appears, replacing with vue_cjs_prod.unref fixes the problem
I can provide stripped down project I'm working on if it's hard to reproduce, but looks like it happens with any v-bind.
Also tried with plain css instead of scss - same problem

[danielroe]

@antfu do you think this might be an auto-import issue?

Reproduction: https://stackblitz.com/edit/github-eevswz

[antfu]

This is an upstream @vitejs/plugin-vue bug. I am investigating and will send a fix.

[antfu]

Upstream PR: vuejs/core#6489