Vuejs script setup cannot contain ES module exports

user_5091805 0
Viewed 10277

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] <script setup> cannot contain ES module exports. If you are using a previous version of <script setup>, 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!

vue.js
3 Answers

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>
user_50918050
user_41266480

Add Following code to your main.js file

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import { createPinia } from 'pinia'

const app = createApp(App)


.use(createPinia())
app.mount('#app')

user_102908290
Related