Imported constants produce undefined when inside template string in DEV mode

[sheremet-va]

Version

3.2.2

Reproduction link

https://codesandbox.io/s/musing-lake-jx008?file=/src/App.vue

Steps to reproduce

Create test.ts file:

export const VARIABLE = '123';

Create Comp.vue file:

<script setup lang="ts">
import { VARIABLE } from './test'
</script>

<template>
    <div>{{ `${VARIABLE}123` }}</div>
</template>

What is expected?

123123 on screen

What is actually happening?

undefined123 on screen

[HcySunYang]

Update the dependency package (vue/vue-cli) to the latest version will not have this issue.

[sheremet-va]

I don't use vue-cli, I am using Vite. Repro link inside the issue was provided by your creating issues template. I just reproduced the error.

The problem was a non-issue, until I updated my dependencies to the latest versions. I have my versions strict. (without ^). And only ^3.2.0 gives me this unexpected behavior.

[sheremet-va]

And the latest vue release is 3.2.2

[sheremet-va]

Here, I made a reproduction (using Vite starter template): https://github.com/sheremet-va/vue-template-string-setup-bug

[HcySunYang]

As a workaround, change this:

<div>{{ `${VARIABLE}123` }}</div>

to

<div>{{ VARIABLE }}123</div>
<!-- or -->
<div>{{ VARIABLE + `123` }}</div>

[sheremet-va]

I want to point out, that the problem persist not only inside {{ }}, but inside any template string ('`'). For example, inside :name="`${VARIABLE}123`"

But workaround is working, yes.

[HcySunYang]

Just add a hint here, we can't completely strip the Template strings(Template literals), https://github.com/vuejs/vue-next/blob/master/packages/compiler-sfc/src/compileScript.ts#L2249