[Quasar v2] Error importing LocalStorage plugin

[rodrigoslayertech]

Describe the bug Uncaught (in promise) TypeError: quasar_src_plugins_LocalStorage_js__WEBPACK_IMPORTED_MODULE_1__.default.getItem is not a function

Codepen/jsFiddle/Codesandbox (required) -- None --

To Reproduce Steps to reproduce the behavior:

1. Import LocalStore in any Vuex getters file module
2. Try to get item with LocalStorage.getItem(...)
3. See error

Expected behavior Get item without error

Screenshots

Platform (please complete the following information): Quasar Version: @quasar/app Version: Quasar mode: [X] SPA [ ] SSR [] PWA [ ] Electron [ ] Cordova [ ] Capacitor [ ] BEX Tested on: [X] SPA [ ] SSR [ ] PWA [ ] Electron [ ] Cordova [ ] Capacitor [ ] BEX OS: Node: NPM: Yarn: Browsers: iOS: Android: Electron:

Additional context -- None --

[rstoenescu]

Add 'LocalStorage' to to quasar.conf > framework > plugins --- like mentioned in the Installation section in docs.

[rodrigoslayertech]

Add 'LocalStorage' to to quasar.conf > framework > plugins --- like mentioned in the Installation section in docs.

Already added. I am upgrading from version 1. In version 1 it worked.

[rodrigoslayertech]

-- Quasar Conf

// Configuration for your app
// https://quasar.dev/quasar-cli/quasar-conf-js
/* eslint-env node */

module.exports = function (ctx) {
  return {
    // https://quasar.dev/quasar-cli/supporting-ts
    supportTS: true,

    // https://quasar.dev/quasar-cli/prefetch-feature
    preFetch: true,
    // app boot file (/src/boot)
    // --> boot files are part of "main.js"
    // https://quasar.dev/quasar-cli/cli-documentation/boot-files
    boot: [
      // 'i18n',
      'axios'
    ],

    // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
    css: [
      'app.sass'
    ],

    // https://github.com/quasarframework/quasar/tree/dev/extras
    extras: [
      // 'ionicons-v4',
      // 'mdi-v4',
      'fontawesome-v5',
      // 'eva-icons',
      // 'themify',
      // 'line-awesome',
      // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!

      'roboto-font', // optional, you are not bound to it
      'material-icons' // optional, you are not bound to it
    ],

    // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
    build: {
      vueRouterMode: 'history', // available values: 'hash', 'history'

      // transpile: false,

      // Add dependencies for transpiling with Babel (Array of string/regex)
      // (from node_modules, which are by default not transpiled).
      // Applies only if "transpile" is set to true.
      // transpileDependencies: [],

      // rtl: false, // https://quasar.dev/options/rtl-support
      // preloadChunks: true,
      // showProgress: false,
      // gzip: true,
      // analyze: true,

      // Options below are automatically set depending on the env, set them if you want to override
      // extractCSS: false,

      env: ctx.dev
        ? { // so on dev we'll have
            API: 'https://api.inquizitor.app'
          }
        : { // and on build (production):
            API: 'https://api.inquizitor.app'
          },

      // https://quasar.dev/quasar-cli/cli-documentation/handling-webpack
      extendWebpack (cfg) {
        cfg.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /node_modules/
        })
      },
      chainWebpack (chain) {
        chain.module.rule('pug')
          .test(/\.pug$/)
          .use('pug-plain-loader')
          .loader('pug-plain-loader')
      }
    },

    // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-devServer
    devServer: {
      https: false,
      port: 8181,
      open: true // opens browser window automatically
    },

    // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework
    framework: {
      iconSet: 'material-icons', // Quasar icon set
      lang: 'pt-BR', // Quasar language pack
      config: {
        cordova: {
          backButtonExit: false
        },
        capacitor: {
          backButtonExit: false
        }
      },

      // Possible values for "all":
      // * 'auto' - Auto-import needed Quasar components & directives
      //            (slightly higher compile time; next to minimum bundle size; most convenient)
      // * false  - Manually specify what to import
      //            (fastest compile time; minimum bundle size; most tedious)
      // * true   - Import everything from Quasar
      //            (not treeshaking Quasar; biggest bundle size; convenient)
      importStrategy: 'auto',

      components: [],
      directives: [],

      // Quasar plugins
      plugins: ['Loading', 'Cookies', 'Notify', 'Dialog', 'LocalStorage', 'SessionStorage', 'Screen', 'BottomSheet']
    },

    // animations: 'all', // --- includes all animations
    // https://quasar.dev/options/animations
    animations: [],

    // https://quasar.dev/quasar-cli/developing-ssr/configuring-ssr
    ssr: {
      pwa: false
    },

    // https://quasar.dev/quasar-cli/developing-pwa/configuring-pwa
    pwa: {
      workboxPluginMode: 'GenerateSW', // 'GenerateSW' or 'InjectManifest'
      workboxOptions: {}, // only for GenerateSW
      manifest: {
        name: 'Inquizitor',
        short_name: 'Inquizitor',
        description: 'Cliente do Inquizitor',
        display: 'standalone',
        orientation: 'portrait',
        background_color: '#ffffff',
        theme_color: '#027be3',
        icons: [
          {
            src: 'logo/inquizitor-128x128.png',
            sizes: '128x128',
            type: 'image/png'
          },
          {
            src: 'logo/inquizitor-192x192.png',
            sizes: '192x192',
            type: 'image/png'
          },
          {
            src: 'logo/inquizitor-256x256.png',
            sizes: '256x256',
            type: 'image/png'
          },
          {
            src: 'logo/inquizitor-384x384.png',
            sizes: '384x384',
            type: 'image/png'
          },
          {
            src: 'logo/inquizitor-512x512.png',
            sizes: '512x512',
            type: 'image/png'
          }
        ]
      }
    },

    // Full list of options: https://quasar.dev/quasar-cli/developing-cordova-apps/configuring-cordova
    cordova: {
      // noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing
      id: 'tech.slayer.inquizitor'
    },

    // Full list of options: https://quasar.dev/quasar-cli/developing-capacitor-apps/configuring-capacitor
    capacitor: {
      hideSplashscreen: true
    },

    // Full list of options: https://quasar.dev/quasar-cli/developing-electron-apps/configuring-electron
    electron: {
      bundler: 'packager', // 'packager' or 'builder'

      packager: {
        // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options

        // OS X / Mac App Store
        // appBundleId: '',
        // appCategoryType: '',
        // osxSign: '',
        // protocol: 'myapp://path',

        // Windows only
        // win32metadata: { ... }
      },

      builder: {
        // https://www.electron.build/configuration/configuration

        appId: 'inquizitor'
      },

      // More info: https://quasar.dev/quasar-cli/developing-electron-apps/node-integration
      nodeIntegration: true,

      extendWebpack (cfg) {
        // do something with Electron main process Webpack cfg
        // chainWebpack also available besides this extendWebpack
      }
    }
  }
}

[rodrigoslayertech]

package.json

{
  "name": "inquizitor",
  "version": "1.0.0",
  "description": "Formulários e questionários.",
  "productName": "Inquizitor",
  "author": "Rodrigo Vieira <rodrigo@slayer.tech>",
  "private": true,
  "scripts": {
    "lint": "eslint --ext .js,.vue src",
    "test": "echo \"No test specified\" && exit 0"
  },
  "dependencies": {
    "@quasar/extras": "^1.9.19",
    "axios": "^0.18.1",
    "core-js": "3.6.5",
    "pug": "^3.0.0",
    "pug-plain-loader": "^1.1.0",
    "quasar": "^2.0.0-beta.9",
    "vue-i18n": "^9.0.0-rc.7"
  },
  "devDependencies": {
    "@quasar/app": "^3.0.0-beta.9",
    "babel-eslint": "^10.0.1",
    "eslint": "^7.14.0",
    "eslint-config-standard": "^16.0.2",
    "eslint-loader": "^3.0.3",
    "eslint-plugin-import": "^2.19.1",
    "eslint-plugin-node": "^11.0.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^7.0.0",
    "eslint-webpack-plugin": "^2.4.0"
  },
  "browserslist": [
    "last 10 Chrome versions",
    "last 10 Firefox versions",
    "last 4 Edge versions",
    "last 7 Safari versions",
    "last 8 Android versions",
    "last 8 ChromeAndroid versions",
    "last 8 FirefoxAndroid versions",
    "last 10 iOS versions",
    "last 5 Opera versions"
  ],
  "engines": {
    "node": ">= 10.18.1",
    "npm": ">= 6.13.4",
    "yarn": ">= 1.21.1"
  }
}

[MinatoHikari]

Same problem here, have you resolved it?

[rstoenescu]

For the life of me I cannot reproduce. Can one of you please offer a reproduction repo or a codesandbox (fork https://codesandbox.io/s/optimistic-poitras-4t3m3)?

Thank you.

[rstoenescu]

What I tried:

Created a new store module (quasar new store mystore). Referenced it in /src/store. This is my /src/store/mystore/getters.js:

import { LocalStorage } from 'quasar'

export function someGetter (state) {
  return LocalStorage.getItem('mimi')
}

No errors. Everything works out.

[MinatoHikari]

What I tried:

Created a new store module (quasar new store mystore). Referenced it in /src/store. This is my /src/store/mystore/getters.js:

import { LocalStorage } from 'quasar'

export function someGetter (state) {
  return LocalStorage.getItem('mimi')
}

No errors. Everything works out.

thanks, I use Localstorage in a hook file like useRequest.ts

//  src/compositions/useRequest.ts

import { LocalStorage, Notify } from 'quasar';

export default function useRequests() {
    console.log(Notify);
    console.log(LocalStorage);
}

[rstoenescu]

Ah, I think you are using LocalStorage.getItem() at root level (outside of a getter method). I guess I can prepare LocalStorage/SessionStorage earlier. Will try something out.

[rstoenescu]

Figured it out. Enhancement will be available in Quasar v2.0.0-beta.10. Thanks for insisting!

[rstoenescu]

Applied same trick to Cookies also.

[rodrigoslayertech]

Figured it out. Enhancement will be available in Quasar v2.0.0-beta.10. Thanks for insisting!

Sorry for not being clear or giving you more examples.

[rstoenescu]

Yeah, it's important to leave out the guessing work so more tickets can be tackled in the same amount of time. Changing context is a killer too. Luckily, the idea struck me almost right after I posted here, so all good :)

v2.0.0-beta.10 is available and your use-case should work now. Enjoy!