I am currently working on a Vue3 project that I have set up using vue-cli and run with npm run serve. In order for all services to use a specific const, I have defined it in my main.js file.
// main.js
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import "jquery"
import "bootstrap-icons/font/bootstrap-icons.css";
let x = 'google'
export {x};
const app = createApp(App)
app.use(store)
app.use(router)
app.mount("#app")
The services/GetCategoriesService.js file looks like this:
import { x } from "../main.js"
console.log(x)
In my components/footer.vue file within the <script> tag, I am executing the service script:
import * as $ from 'jquery'
import "../services/GetCategoriesService"
Initially, this setup results in 'undefined' being logged. Strangely, adding an extra console.log in my service script triggers hot reloading (without refreshing the page) and I can now see two console.log outputs with 'google'. However, upon refreshing the page, the outputs turn back to 'undefined'. Adding another console.log without refreshing leads to three 'google' prints, and then refreshing again shows three 'undefined' logs, which is quite puzzling. This issue is observed in Firefox version 105.0.
It is worth noting that using a named export of x and logging x inside a function (called from footer.vue) results in the same behavior.