Illegal reassignment to import myVar

[stephanedemotte]

Describe the bug

Hello,
I'm trying to use the new script setup feature, but got an error when i'm trying to compile.

Reproduction

Create a fresh vite app

App.vue

<template>
  <div>{{ isActive.value }}(work in build)</div>
  <div>{{ isActive }}(work in dev)</div>
  <button @click="isActive = !isActive">change value</button>
  <HelloWorld />
</template>

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

HelloWorld.vue

<template>
  <div>
    {{ isActiveTpl }}
  </div>
</template>

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

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

First question, there a way to use isActive in the HelloWorld.vue template without re-declared it const isActiveTpl = isActive ?

Now the bug.

If i use the imported ref in App.vue, everything works in dev mode. But got an error on compilation. See below.
I can fix with <button @click="isActive.value = !isActive.value">change value</button> but, it will work in production but not in dev mode :)

Source code
Compiled version

System Info

• required vite version: v1.0.0-rc.13
• required Operating System: mac
• required Node version: v12.11.1
• Optional:
  • Installed vue version : 3.0.3
  • Installed @vue/compiler-sfc version : 3.0.3

Logs (Optional if provided reproduction)

[CHOYSEN]

import { isActive } from './components/HelloWorld.vue'

I think that is not a correct usage, maybe you want to share a reactive object between parent and child components?

// App.vue
<template>
  <div>{{ isActive }}</div>
  <button @click="isActive = !isActive">change value</button>
  <HelloWorld :isActive="isActive" />
</template>

<script setup>
import HelloWorld from "./components/HelloWorld.vue";
import { ref } from "vue";

const isActive = ref(false);
</script>

// HelloWorld.vue
<template>
  <div>
    {{ isActive }}
  </div>
</template>

<script setup>
import { defineProps } from "vue";

defineProps({
  isActive: Boolean,
});
</script>

OR

// src/state.js
import { reactive } from "vue"

export default reactive({
  isActive: false
})

// src/App.vue
<template>
  <div>{{ isActive }}</div>
  <button @click="isActive = !isActive">change value</button>
  <HelloWorld />
</template>

<script setup>
import HelloWorld from "./components/HelloWorld.vue";
import state from "./state";
import { toRef } from "vue";

const isActive = toRef(state, "isActive");
</script>

// src/components/HelloWorld.vue
<template>
  <div>
    {{ state.isActive }}
  </div>
</template>

<script setup>
import state from "../state";
</script>

[stephanedemotte]

Yep i can do it like you say, but i want to use it in this way

<script>
  performGlobalSideEffect()

  // this can be imported as `import { named } from './*.vue'`
  export const named = 1
</script>

<script setup>
  let count = 0
</script>

In the "doc" we can import value from '.vue' file. So maybe it's a wrong information ?