Skip to content

script setup: ref imported from a .vue file doesn't work after build #2735

@stephanedemotte

Description

@stephanedemotte

Version

3.0.4

Reproduction link

https://github.com/stephanedemotte/_issue-vue3-script-setup

Steps to reproduce

Create a fresh vitejs app

helloworld.vue

<template>
  <div>
    HelloWorld [{{ isActiveTpl }}]
  </div>
</template>

<script>
import { ref } from 'vue'
export const isActive = ref(false)
</script>

<script setup>
const isActiveTpl = isActive
</script>

app.vue

<template>
  <div>
    App [{{ isActive }}]
  </div>
</template>

<script setup>
import { isActive } from './components/HelloWorld.vue'
</script>

What is expected?

the value should be: true / false

What is actually happening?

After build the ref variable output a weird value

If i try to do isActive = !isActive on app.vue, i've got no error on dev, but got Error: Illegal reassignment to import 'isActive' when i try to build


Builded link
http://test-vue-export.gaidaandsteph.com/

Metadata

Metadata

Assignees

No one assigned

    Labels

    ❗ p4-importantPriority 4: this fixes bugs that violate documented behavior, or significantly improves perf.🐞 bugSomething isn't workingscope: compiler

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions