Vuejs script setup cannot contain ES module exports

Question

Following the setup guide for Vuejs and Pinia

<script setup>
import {useStore} from "../stores/store.js";

export default {
  setup() {
    const store = useStore();
    return {
      store,
    }
  },
}
</script>

I get the following error from Vite:

[vite] Internal server error: [@vue/compiler-sfc] cannot contain ES module exports. If you are using a previous version of , please consult the updated RFC at https://github.com/vuejs/rfcs/pull/227.

How do I move to a version of <script setup> that will allow me to do the above?

Thanks!

Answer 1

A bit of confusion on my end it seems. The docs talk about adding <script setup> and then also demonstrate using setup(){}, but they don't explicitly state that its one or the other.

Method 1:

<script setup>
import {useStore} from "../stores/store.js";

const store = useStore();

// do stuff
</script>

Method 2:

<script>
import { defineComponent } from 'vue'
import {useStore} from "../stores/store.js";

export default defineComponent({
  setup() {
    const store = useStore();
    // do stuff

    return {
      store,
    }
  }
})
</script>

Answer 2

I think you mismatched two methods of local components registration.

Check:

• https://vuejs.org/guide/components/registration.html#local-registration
• https://vuejs.org/guide/reusability/composables.html#what-is-a-composable

When using SFC with , imported components are automatically registered locally:

<script setup>
import { useStore } from '../store/store.js'

const { store } = useStore()
</script>