TypeError: a.localStorage.setItem is not a function

[landall]

What happened?

My site works ok with quasar dev run but white screen with quasar build.

DevTools console show: TypeError: a.localStorage.setItem is not a function at app.ccb5cce6.js:1:1607 at vendor.0daabce7.js:69:13691 at o (vendor.0daabce7.js:69:13423) at vendor.0daabce7.js:69:13682 at new Promise () at vendor.0daabce7.js:69:13496 at Object.runWithContext (vendor.0daabce7.js:3:8038) at N (vendor.0daabce7.js:69:19818) at vendor.0daabce7.js:69:22842

What did you expect to happen?

works the same with quasar dev run.

Reproduction URL

http://74.48.64.200/spa1000/#/

How to reproduce?

It seems to be a build issue.

Flavour

Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)

Areas

Plugins (quasar), SPA Mode

Platforms/Browsers

Chrome

Quasar info output

Operating System - Windows_NT(10.0.19045) - win32/x64
NodeJs - 16.14.2

Global packages
  NPM - 8.5.0
  yarn - Not installed
  @quasar/cli - 2.4.0
  @quasar/icongenie - Not installed
  cordova - 12.0.0 (cordova-lib@12.0.1)

Important local packages
  quasar - 2.15.1 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-webpack - 3.12.4 -- Quasar Framework App CLI with Webpack
  @quasar/extras - 1.16.10 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.4.21 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.3.0
  pinia - Not installed
  vuex - Not installed
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.24.3 -- Babel compiler core.
  webpack - 5.91.0 -- Packs ECMAScript/CommonJs/AMD modules for the browser. Allows you to split your codebase into multiple bundles, which can be loaded on demand. Supports loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 4.11.1 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  typescript - 4.9.4 -- TypeScript is a language for application scale JavaScript development
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - CST-PC
  WLAN - 192.168.31.13
  vEthernet (Default Switch) - 172.17.240.1
  vEthernet (WLAN) - 172.25.240.1
  vEthernet (WSLCore) - 172.22.192.1

Relevant log output

framework: {
      config: {},

      // iconSet: 'material-icons', // Quasar icon set
      // lang: 'en-US', // Quasar language pack

      // For special cases outside of where the auto-import strategy can have an impact
      // (like functional components as one of the examples),
      // you can manually specify Quasar components/directives to be available everywhere:
      //
      // components: [],
      // directives: [],

      // Quasar plugins
      plugins: ['Notify', 'LocalStorage', 'Loading']
    },

Additional context

No response

[github-actions[bot]]

Hi @landall! 👋

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. 👏

[landall]

http://74.48.64.200/spa1001/#/ This site is build with quasar build -d http://74.48.64.200/vue_src.zip This is the source code.

[landall]

And which build command can build just the same behavior with quasar dev run?

[landall]

It is an issue about useQuasar() in anonymous function in src/router/index.js. It works in dev mode but fails in build mode.

import { route } from 'quasar/wrappers'
import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router'
import routes from './routes'

import { useQuasar } from 'quasar';

/*
 * 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 (/* { store, ssrContext } */) {
    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, from, next) => {
        const $q = useQuasar();
        console.log($q);

        console.log(to, from, next, to.meta.area, to.meta.isMemberArea);
        var isLogined = checkLogin();
        console.log('isLogined=', isLogined);
        if ((to.meta.isMemberArea == true) && (isLogined !== true))
        {
            //$q.localStorage.setItem("preRoute", Router.currentRoute.fullPath);
            localStorage.setItem("preRoute", Router.currentRoute.fullPath);
            next({ path: '/login' });
        }
        else
        {
            //$q.localStorage.remove("preRoute");
            localStorage.removeItem("preRoute");
            next();
        }
    });

    return Router;
});

[landall]

Not only index.js, all $q.localStorage report TypeError.

[dongwa]

please ref: https://quasar.dev/quasar-plugins/web-storage

import { LocalStorage, SessionStorage } from 'quasar'

LocalStorage.set(key, value)
let value = LocalStorage.getItem(key)

SessionStorage.set(key, value)
let value = SessionStorage.getItem(key)

[landall]

sorry, a careless mistake. there is no setItem but set....

[landall]

It confuses me that the methods are getItem & set in Quasar.LocalStorage but getItem&setItem in Html5. It also confuses me that It is not broken when I use quasar dev run.

Maybe add a setItem method to be the alias of set is a good choice.

[rstoenescu]

@landall Good point. Added aliases. Will be available in Quasar v2.15.3