Pinia not initiating before boot files

[maggie44]

What happened?

In my boot files (src/boot) I initialise Axios. Part of that initialisation draws on an entry from the Pinia store. Occasionally when running development mode (and only occasionally) I get the following error (seen so far with Electron, haven't been able to confirm with other types):

Uncaught (in promise) ReferenceError: Cannot access 'axiosSettings' before initialization
    at axios.ts:15:22
(anonymous) @ axios.ts:15

It stems from the const axiosBaseUrl = axiosSettings() in my Axios boot file which accesses the Pinia store to get some configuration settings for Axios:

export const axiosSettings = defineStore('axiosSettings', {
  state: () => ({ axiosBaseUrl: '' }),
  actions: {
    setUrl(newUrl: string) {
      this.axiosBaseUrl = newUrl
    }
  }
})

From the docs it seems like Pinia is initiated before the boot files (https://quasar.dev/quasar-cli/boot-files):

5. Store is imported (if using Pinia in src/stores or Vuex in src/store)
6. Pinia (if using) is injected into the Vue app instance
7. Router is imported (in src/router)
8. Boot files are imported

Could there be some sort of race condition? Does the boot file importing wait for the steps before to complete?

What did you expect to happen?

Pinia store to be initiated fully before calling the boot files.

Reproduction URL

Cannot reproduce consistently

How to reproduce?

Cannot reproduce consistently

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Electron Mode

Platforms/Browsers

Electron

Quasar info output

Operating System - Darwin(21.6.0) - darwin/arm64
NodeJs - 16.16.0

Global packages
  NPM - 8.11.0
  yarn - 3.2.2
  @quasar/cli - 1.3.2
  @quasar/icongenie - 2.5.3
  cordova - Not installed

Important local packages
  quasar - 2.8.3 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.1.1 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.15.3 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.38 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.1.5
  pinia - 2.0.21 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 2.9.15 -- Native-ESM powered web dev build tool
  eslint - 8.23.0 -- An AST-based pattern checker for JavaScript.
  electron - 20.1.0 -- Build cross platform desktop apps with JavaScript, HTML, and CSS
  electron-packager - 15.5.2 -- Customize and package your Electron app with OS-specific bundles (.app, .exe, etc.) via JS or CLI
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Relevant log output

No response

Additional context

No response

[github-actions[bot]]

Hi @Maggie0002! 👋

It looks like you provided an invalid or unsupported reproduction URL.
Do not use any service other than Codepen, jsFiddle, StackBlitz, Codesandbox, and GitHub.
Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc.
Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

[pdanpdan]

Check these: https://github.com/quasarframework/quasar/discussions?discussions_q=pinia+boot

I think #13704 is what would help you

[maggie44]

I'm reading and reading, but a little lost as to what it is suggesting in relation Quasar boot.

It is suggesting to export const networkStore = networkSettings() and const axiosBaseUrl = axiosSettings() from the files or from the store file to be imported?

Pinia.ts

// Pinia store actions to call on first boot
import { networkSettings } from 'stores/system'

const networkStore = networkSettings()

// Get Cloudlink status
if (process.env.ON_DEVICE?.toLowerCase() === 'true') {
  void networkStore.checkCloudlink()
}

axios.ts

import axios, { AxiosError, AxiosInstance } from 'axios'
import { i18n } from 'boot/i18n'
import { Notify } from 'quasar'
import { axiosSettings } from 'stores/system'

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $axios: AxiosInstance
  }
}

// eslint-disable-next-line @typescript-eslint/unbound-method
const { t } = i18n.global

const axiosBaseUrl = axiosSettings()

const expressApi = axios.create({
  timeout: 60000 // Sets a high timeout unlikely to be reached. More specifc timeouts are set in the ExpressJS backend.
})

expressApi.defaults.baseURL = `http://${process.env.DEVICE_HOSTNAME}`

// Store the default URL in the Pinia store
axiosBaseUrl.setUrl(expressApi.defaults.baseURL)

// Axios request interceptor
expressApi.interceptors.request.use(
  (config) => {
    // Override the default baseURL based on stored path from electron app
    const currentBaseUrl = axiosBaseUrl.$state.axiosBaseUrl

    if (currentBaseUrl) {
      config.baseURL = currentBaseUrl
    }
    return config
  },
  (error: AxiosError) => {
    if (error && error.request) {
      // The request was made but no response was received
      // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
      // http.ClientRequest in node.js
      Notify.create({
        type: 'negative',
        message: t('system.errors.request_error')
      })
    }
    // Reject with UI Axios error
    return Promise.reject(error)
  }
)

export { expressApi }

And one stores/system.ts

import { expressApi } from 'boot/axios'
import { defineStore } from 'pinia'

interface cloudlinkConnection {
  loggedIn: boolean
}

export const axiosSettings = defineStore('axiosSettings', {
  state: () => ({ axiosBaseUrl: '' }),
  actions: {
    setUrl(newUrl: string) {
      this.axiosBaseUrl = newUrl
    }
  }
})

export const networkSettings = defineStore('networkSettings', {
  state: () => ({
    isCloudlink: undefined as boolean | undefined
  }),

  actions: {
    async checkCloudlink() {
      try {
        const response = await expressApi.get<cloudlinkConnection>(
          '/v1/sdk/loggedIn',
          { timeout: 15000 }
        )
        this.isCloudlink = response.data.loggedIn
        return Promise.resolve()
      } catch (error) {
        console.error('Failed fetching Cloudlink status.')
        console.error(error)
        this.isCloudlink = false
        return Promise.reject(error)
      }
    }
  }
})

[pdanpdan]

You have the store file stores/settings.js:

export const useSettings = defineStore('settings', {
  state: () => ({
    setting: ''
  }),

  actions: {
    changeSetting(value) {
      this.setting = value
    }
  }
})

and a boot file where you want to use the store boot/boot_using_store.js:

import { boot } from 'quasar/wrappers'
import { useSettings } from 'stores/settings.js'

export default boot(({ store }) => {
  const settingsStore = useSettings(store)

  console.log(settingsStore.setting)
})

[adgower]

I basically removed everything and just added this to routes/index.js and this works... but I would still like to use the calls to the function on the route

import { route } from "quasar/wrappers";
import { useAuthStore } from "src/stores/useAuthStore";
import {
  createRouter,
  createMemoryHistory,
  createWebHistory,
  createWebHashHistory,
} from "vue-router";
import routes from "./routes";

/*
 * If not building with SSR mode, you can
 * directly export the Router instantiation;
 *
 * The function below can be async too; either use
 * async/await or return a Promise which resolves
 * with the Router instance.
 */

export default route(function () {
  const createHistory = process.env.SERVER
    ? createMemoryHistory
    : process.env.VUE_ROUTER_MODE === "history"
    ? createWebHistory
    : createWebHashHistory;

  const Router = createRouter({
    scrollBehavior: () => ({ left: 0, top: 0 }),
    routes,

    // Leave this as is and make changes in quasar.conf.js instead!
    // quasar.conf.js -> build -> vueRouterMode
    // quasar.conf.js -> build -> publicPath
    history: createHistory(process.env.VUE_ROUTER_BASE),
  });

  Router.beforeEach((to) => {
    const useAuth = useAuthStore();

    if (!useAuth.isAuthenticated && to.name == "dashboard") {
      return { name: "login" };
    }
  });

  return Router;
});

[adgower]

I solved it using meta:
index.js:

import { Notify } from "quasar";
import { route } from "quasar/wrappers";
import { useAuthStore } from "src/stores/useAuthStore";
import {
  createRouter,
  createMemoryHistory,
  createWebHistory,
  createWebHashHistory,
} from "vue-router";
import routes from "./routes";

/*
 * If not building with SSR mode, you can
 * directly export the Router instantiation;
 *
 * The function below can be async too; either use
 * async/await or return a Promise which resolves
 * with the Router instance.
 */

export default route(function () {
  const createHistory = process.env.SERVER
    ? createMemoryHistory
    : process.env.VUE_ROUTER_MODE === "history"
    ? createWebHistory
    : createWebHashHistory;

  const Router = createRouter({
    scrollBehavior: () => ({ left: 0, top: 0 }),
    routes,

    // Leave this as is and make changes in quasar.conf.js instead!
    // quasar.conf.js -> build -> vueRouterMode
    // quasar.conf.js -> build -> publicPath
    history: createHistory(process.env.VUE_ROUTER_BASE),
  });

  Router.beforeEach((to) => {
    const useAuth = useAuthStore();

    if (!useAuth.isAuthenticated && to.meta.requiresAuth) {
      Notify.create({
        message: "You must be logged in to access this page",
        type: "negative",
      });

      return { name: "login" };
    }
  });

  return Router;
});

routes.js:

// DashboardPage.vue
      {
        path: "dashboard",
        component: () => import("pages/DashboardPage.vue"),
        name: "dashboard",
        meta: {
          requiresAuth: true,
        },
      },