I get a TypeError (TypeError: this.options.stores is undefined) after upgrade from v2.7.6 to v3.1.7

[lpofredc]

Environment

---

• Operating System: Linux
• Node Version: v18.18.0
• Nuxt Version: 3.12.3
• CLI Version: 3.12.0
• Nitro Version: 2.9.7
• Package Manager: [email protected]
• Builder: -
• User Config: modules, ssr, pwa, vuetify, css, build, imports, i18n, runtimeConfig, http, auth, compatibilityDate
• Runtime Modules: @vite-pwa/[email protected], @nuxt-alt/[email protected], @nuxt-alt/[email protected], @pinia/[email protected], @invictus.codes/[email protected], @nuxtjs/[email protected], @nuxt/[email protected]
• Build Modules: -

---

Nuxt Config

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules: ["@vite-pwa/nuxt", "@nuxt-alt/auth", "@nuxt-alt/http", [
    "@pinia/nuxt",
    {
      autoImports: ["defineStore", "acceptHMRUpdate"],
    },
  ], "@invictus.codes/nuxt-vuetify", "@nuxtjs/i18n", "@nuxt/eslint"],

  ssr: false,

  pwa: {
    registerType: 'autoUpdate',
    manifest: {
      name: 'Cables & avifaune',
      short_name: 'ocb',
      theme_color: '#0277bd',
      icons: [
        {
          src: 'pwa-192x192.png',
          sizes: '192x192',
          type: 'image/png',
        },
        {
          src: 'pwa-512x512.png',
          sizes: '512x512',
          type: 'image/png',
        },
        {
          src: 'pwa-512x512.png',
          sizes: '512x512',
          type: 'image/png',
          purpose: 'any maskable',
        },
      ],
    },
    workbox: {
      navigateFallback: "/",
      globPatterns: ["**/*.{js,css,html,json,ico,png,svg}"],
    },
    client: {
      installPrompt: true,
      // you don't need to include this: only for testing purposes
      // if enabling periodic sync for update use 1 hour or so (periodicSyncForUpdates: 3600)
      periodicSyncForUpdates: 20,
    },
    devOptions: {
      enabled: true,
      suppressWarnings: true,
      navigateFallbackAllowlist: [/^\/$/],
      type: 'module',
    },
  },

  vuetify: {
    /* vuetify options */
    vuetifyOptions: {
      // @TODO: list all vuetify options
    },
    moduleOptions: {
      /* nuxt-vuetify module options */
      treeshaking: true,
      useIconCDN: true,
      /* vite-plugin-vuetify options */
      styles: true,
      autoImport: true,
    },
  },

  css: [
    "vuetify/lib/styles/main.css",
    "@mdi/font/css/materialdesignicons.min.css",
    "leaflet/dist/leaflet.css",
    "@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css",
  ],

  build: {
    transpile: ["vuetify", "leaflet-geoman"],
  },

  imports: {
    // Auto-import pinia stores defined in `~/stores`
    dirs: ["store"],
  },

  i18n: {
    locales: [
      { code: "en", iso: "en-US", file: "en.json" },
      { code: "fr", iso: "fr-FR", file: "fr.json" },
    ],

    defaultLocale: "fr",
    langDir: "locales",
  },

  // devtools: {
  //     // Enable devtools (default: true)
  //     enabled: true,
  //     // VS Code Server options
  //     vscode: {},
  //     // ...other options
  // },
  // routeRules: {
  //     '/api/v1/**': { cors: true, headers: { 'access-control-allow-methods': 'GET' }, proxy: 'http://localhost:8000' }
  // },
  runtimeConfig: {
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE || "http://localhost:8000",
    },
  },

  http: {},

  auth: {
    // cookie: false,
    redirect: {
      login: "/account/login",
      logout: "/",
      callback: "/account/login",
      home: "/",
    },
    // globalMiddleware: true,
    strategies: {
      local: {
        scheme: "refresh",
        cookie: false,
        token: {
          property: "access", // property name of access token get from Back-end
          // global: true,
          // required: true,
          maxAge: 1800,
          type: "JWT",
        },
        refreshToken: {
          // it sends request automatically when the access token expires, and its expire time has set on the Back-end
          property: "refresh", // property name of refresh token get from Back-end
          data: "refresh", // data can be used to set the name of the property you want to send in the request.
          maxAge: 60 * 60 * 24 * 30,
        },
        user: {
          property: false,
          autoFetch: true,
        },
        endpoints: {
          login: {
            url: "/api/v1/auth/jwt/create/",
            method: "post",
          },
          refresh: { url: "/api/v1/auth/jwt/refresh", method: "post" },
          logout: false, //  there is no endpoint for logout in API. Just remove the token from localstorage
          user: {
            url: "/api/v1/auth/users/me/",
            method: "get",
            property: true,
          },
          reset: {
            url: "/api/v1/auth/reset_password/",
            method: "post",
          }
        },
      },
    },
  },

  compatibilityDate: "2024-07-15",
});

Reproduction

Source repository is there https://github.com/lpoaura/overheadCablesAndBirdlife/

Describe the bug

TypeError: this.options.stores is undefined
    NuxtJS 8
        isCookiesEnabled
        getCookie
        sourceOrder
        getUniversal
        setStrategy
        loginWith
        userLogin
        cacheKey
login.vue:82:13
    NuxtJS 35
        userLogin
        cacheKey
        callWithErrorHandling
        callWithAsyncErrorHandling
        invoker
    (Asynchrone : EventListener.handleEvent)
        addEventListener
        patchEvent
        patchProp
        mountElement
        processElement
        patch
        componentUpdateFn
        run
        update
        setupRenderEffect
        mountComponent
        processComponent
        patch
        mountChildren
        mountElement
        processElement
        patch
        componentUpdateFn
        run
        update
        setupRenderEffect
        mountComponent
        processComponent
        patch
        componentUpdateFn
        run
        update
        setupRenderEffect
        mountComponent
        processComponent

Additional context

Error occur when using auth.loginWith(...) function. error message is raised in the try ... cath ...

This error is raised by using this code:

<template>
  <v-sheet width="100%" max-width="600" class="mx-auto">
    <v-form ref="loginForm" v-model="formValid" @keyup.enter="userLogin">

      <v-card class="mx-auto pa-12 pb-8" elevation="0" rounded="lg">

        <div class="text-subtitle-1 text-medium-emphasis">Account</div>

        <v-text-field v-model="login.username" density="compact" placeholder="Usename"
          prepend-inner-icon="mdi-account-outline" variant="outlined" :rules="nameRules" autofocus
          @keyup.enter="userLogin" />

        <div class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between">
          Password

          <a class="text-caption text-decoration-none text-blue" :href="'/account/reset'" rel="noopener noreferrer">
            Forgot login password?</a>
        </div>

        <v-text-field v-model="login.password" :append-inner-icon="visible ? 'mdi-eye-off' : 'mdi-eye'"
          :type="visible ? 'text' : 'password'" density="compact" placeholder="Enter your password"
          prepend-inner-icon="mdi-lock-outline" variant="outlined" :rules="pwdRules"
          @click:append-inner="visible = !visible" />

        <v-btn block class="mb-8" color="blue" size="large" variant="flat" :loading="loading" :disabled="!valid"
          @click="userLogin()">
          {{ $t('login.sign-in') }}
        </v-btn>
        <!-- <v-card-text class="text-center">
          <a class="text-blue text-decoration-none" href="#" rel="noopener noreferrer" target="_blank">
            Sign up now <v-icon icon="mdi-chevron-right"></v-icon>
          </a>
        </v-card-text> -->
      </v-card>
    </v-form>
  </v-sheet>
</template>

<script setup type="ts">
const { t } = useI18n()
const router = useRouter()



const auth = useAuth()
const loginForm = ref(null)
const formValid = ref(false)
const loading = ref(false)
const login = reactive({
  username: '',
  password: ''
})
const nameRules = reactive([v => !!v || t('login.required_username_msg')])
const pwdRules = reactive([v => !!v || t('login.required_pwd_msg')])
const visible = ref(false)

const nomenclaturesStore = useNomenclaturesStore()

const userLogin = async () => {
  try {
    if (formValid.value) {
      await auth.loginWith('local', {
            body: login
      })
      nomenclaturesStore.loadNomenclatures()
      router.push('/search')
    }
  } catch (err) {
    console.error(err)
  }
}
</script>

Logs

TypeError: this.options.stores is undefined
    NuxtJS 8
        isCookiesEnabled
        getCookie
        sourceOrder
        getUniversal
        setStrategy
        loginWith
        userLogin
        cacheKey
login.vue:82:13
    NuxtJS 35
        userLogin
        cacheKey
        callWithErrorHandling
        callWithAsyncErrorHandling
        invoker
    (Asynchrone : EventListener.handleEvent)
        addEventListener
        patchEvent
        patchProp
        mountElement
        processElement
        patch
        componentUpdateFn
        run
        update
        setupRenderEffect
        mountComponent
        processComponent
        patch
        mountChildren
        mountElement
        processElement
        patch
        componentUpdateFn
        run
        update
        setupRenderEffect
        mountComponent
        processComponent
        patch
        componentUpdateFn
        run
        update
        setupRenderEffect
        mountComponent
        processComponent