exported const variable is undefined in vue

Question

I’m using @vue/cli for a project and I can’t for the life of me figure out why my exported variables aren't working. This is my code setup:

[App.vue]

import {somevar} from './main.js'
console.log(somevar)

[main.js]

import { createApp } from 'vue'
import App from './App.vue'
const somevar = "example"
export {somevar}

createApp(App).mount('#app')

When I run npm run serve, somevar is just coming back as undefined in the browser console…?

I’ve tried to do this with a vanilla setup (not in vue) and it works, so I assume it’s something going on specifically with vue?

Answer 1

I don't think that it is possible to import main.js in App.vue which itself is imported in main.js (cyclic dependency).

I tried to repoduce your setup which resulted in a Uncaught ReferenceError: Cannot access 'App' before initialization in the browser console (I have a project based on vite 2 and vue 3).

I'd suggest to extract the constant in an additional javascript file like example.js and import it in App.vue (and main.js if necessary).

The following setup works for me.

[App.vue]

<script setup>
import { somevar } from './example.js'
console.log(somevar)
</script>

[main.js]

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

createApp(App).mount('#app')

[example.js]

const somevar = "example"
export {somevar}