Quasar: [v1] `import { LocalStorage } from 'quasar' in boot file returns object without getItem()

[MichaelJCole]

Describe the bug

Hello, I'm using LocalStorage in a boot file w/ v1.

I get this error when trying to call getItem() "quasar_src_plugins_LocalStorage_js__WEBPACK_IMPORTED_MODULE_1__.default.getItem is not a function"

This is new behavior - this code was working previously.

module.exports = function (ctx) {
  return {
    // app boot file (/src/boot)
    // --> boot files are part of "main.js"
    boot: [
      'feathers',
    ],

Then in feathers.js, I'm importing from quasar. The

/**
 * Add feathersClient as Vue.$feathers
 */
import AuthManagement from 'feathers-authentication-management/lib/client'
import { LocalStorage } from 'quasar'
import feathersClient from '../lib/feathersClient' // new Auth API https://crow.docs.feathersjs.com/api/authentication/client.html#authentication-client

export default ({ router, store, Vue }) => {
  console.log(LocalStorage)
  const auth = {
    rememberMe (email) {
      // console.log('Help Me! I create a compile time webpack error: quasar_src_plugins_LocalStorage_js__WEBPACK_IMPORTED_MODULE_1__.default.getItem is not a function')
      if (email) return LocalStorage.set('remember_me', email)
      return LocalStorage.getItem('remember_me') || ''
    },

    currentUser (prop) {
      const u = store.state.auth.user || false
      if (u && prop) return u[prop]
      return u
    },

Codepen/jsFiddle/Codesandbox (required)

Clone this repo and uncomment lines here: https://github.com/quathers/myproject/blob/master/src/boot/feathers.js#L5

To Reproduce

console.log(LocalStorage) creates this in the browser console:

{install: ƒ}
install: ƒ install(_ref)
arguments: (...)
caller: (...)
length: 1
name: "install"
prototype: {constructor: ƒ}
__proto__: ƒ ()
[[FunctionLocation]]: LocalStorage.js?18d6:5
[[Scopes]]: Scopes[3]
__proto__: Object

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Platform (please complete the following information):
OS:
Node:
NPM:
Yarn:
Browsers:
iOS:
Android:
Electron:

Additional context
Add any other context about the problem here.

[smolinari]

LocalStorage seems to be working here: https://codesandbox.io/s/codesandbox-app-zgiky

Check out the test.js boot file. You'll have to open up the DevTools to see the output. Not sure why codesandbox's console doesn't pick it up.

Scott

[metalsadman]

@MichaelJCole add 'LocalStorage' in your quasar.conf.js plugins array.

      // Quasar plugins
      plugins: [
        'Notify',
        'LocalStorage' // add this :)
      ]

https://quasar.dev/quasar-plugins/web-storage#Installation

[smolinari]

🤦‍♂ Doh!

Scott

[nothingismagick]

You know, we could be smarter about detecting this kind of issue. I think
@webnoob had an idea for this...

[webnoob]

Yes, I did but I think to get it working as an AE, I'll need a HMR hook I can listen for.
Might discuss it with @lucasfernog as he might have some ideas about it. Will get in touch on Monday.

[MichaelJCole]

@metalsadman that was it exactly! I was copying code from one project to another and splat. @webnoob, a more direct error message will save everyone trouble.

The object returned from the import only has "install" method.

Thank you!

[lucasfernog]

Very nice idea @webnoob, ping me when you have time to talk about it

[smolinari]

I'd say, if we would have the ability to warn about a missing entry in quasar.conf.js I'd also venture to say, we would have the ability to just add it to the config automatically, right?

Scott

[webnoob]

That's my plan 😊

Sent from my iPhone

On 30 Jun 2019, at 08:52, Scott [e-mail] wrote:

I'd say, if we would have the ability to warn about a missing entry in quasar.conf.js I'd venture to say, we would also have the ability to just add it to the config automatically, right?

Scott

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[rstoenescu]

Closing as this has been figured out.

Team, you can still propose improvements on auto adding comps/directives/plugins.

[solovieff]

From the linked issue: I have the LocalStorage at my plugins:
plugins: ['Loading', 'Notify', 'Dialog', 'LocalStorage'],

but still have an TypeError: quasar__WEBPACK_IMPORTED_MODULE_4__.LocalStorage.getItem is not a function error

Also, if I print the LocalStorage object, i got:

{ install: [Function: install],
  has: [Function: t],
  get:
   { length: [Function: t],
     item: [Function: t],
     index: [Function: t],
     all: [Function: t] },
  set: [Function: t],
  remove: [Function: t],
  clear: [Function: t],
  isEmpty: [Function: t] }

I use it with SSR, without it it works fine.

[captainjapeng]

Having the same error, but uncommenting all: true fixes the problem. Did LocalStorage changed somehow?

quasar.conf.js:

    framework: {
      // all: true, // --- includes everything; for dev only!
      components: [
        ...
      ],

      directives: [
        'Ripple',
        'ClosePopup'
      ],

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

      cssAddon: true,
      iconSet: 'fontawesome-v5-pro'
      // iconSet: 'ionicons-v4'
      // lang: 'de' // Quasar language
    },

quasar info:

Operating System - Darwin(18.6.0) - darwin/x64
NodeJs - 11.6.0

Global packages
  NPM - 6.5.0-next.0
  yarn - 1.13.0
  @quasar/cli - 1.0.0
  cordova - 9.0.0 ([email protected])

Important local packages
  quasar - 1.0.3 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app - 1.0.2 -- Quasar Framework local CLI
  @quasar/extras - 1.1.4 -- Quasar Framework fonts, icons and animations
  vue - 2.6.10 -- Reactive, component-oriented view layer for modern web interfaces.
  vue-router - 3.0.6 -- Official router for Vue.js 2
  vuex - 3.1.1 -- state management for Vue.js
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.5.0 -- Babel compiler core.
  webpack - 4.34.0 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 3.7.2 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - 4.3.1 -- A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.
  register-service-worker - 1.6.2 -- Script for registering service worker, with hooks

Quasar App Extensions
  @quasar/quasar-app-extension-icon-genie - 1.0.1 -- A Quasar CLI Extension for Making All Your Icons
  @quasar/quasar-app-extension-dotenv - 1.0.0-beta.10 -- Load .env variables into your quasar project

[captainjapeng]

Sorry above setup didn't work also.. I had to rollback quasar version to beta and uncomment all: true before it worked

Operating System - Darwin(18.6.0) - darwin/x64
NodeJs - 11.6.0

Global packages
  NPM - 6.5.0-next.0
  yarn - 1.13.0
  @quasar/cli - 1.0.0
  cordova - 9.0.0 ([email protected])

Important local packages
  quasar - 1.0.0-rc.5 -- High performance, Material Design 2, full front end stack with Vue.js -- build SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase
  @quasar/app - 1.0.0-rc.7 -- Quasar Framework App CLI
  @quasar/extras - 1.1.3 -- Quasar Framework fonts, icons and animations
  vue - 2.6.10 -- Reactive, component-oriented view layer for modern web interfaces.
  vue-router - 3.0.6 -- Official router for Vue.js 2
  vuex - 3.1.1 -- state management for Vue.js
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.4.5 -- Babel compiler core.
  webpack - 4.34.0 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 3.7.2 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - 4.3.1 -- A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.
  register-service-worker - 1.6.2 -- Script for registering service worker, with hooks

Quasar App Extensions
  @quasar/quasar-app-extension-icon-genie - 1.0.0 -- A Quasar CLI Extension for Making All Your Icons
  @quasar/quasar-app-extension-dotenv - 1.0.0-beta.10 -- Load .env variables into your quasar project

[rstoenescu]

@captainjapeng can you fork a Codesandbox and share it here to see what you are doing, please? thx

[rstoenescu]

@captainjapeng Found a problem when Local/SessionStorage is not available on client-side.. the returned API differed than when it's available. Fix will be in "quasar" v1.2.2.

[captainjapeng]

Thanks! Will re-explore SSR again in the near future.

[OtabekSadiridinov]

Thank you problem was adding LocalStorage to the plugins section of quasar.conf.js.