question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

'localforage' is not defined

See original GitHub issue

I am unable to get localforage to work with the persist plugin. I have tried window.localforage, and window.localForage, but they seem to be the exact same as just using window.localstorage and will only store my values in localstorage (not IndexedDB where my localforage plugin stores things)

And trying to define storage as localforage, or localForage results in an error: 'localforage' is not defined

I definitely have it installed and working (both the base package and vue-localforage) because if I call it from outside vuex-persist I am able to store into it with commands like:

this.$setItem('lfstate', { item1: false, item2: false })

Any tips on how to properly define this in my store’s index.js file? my code currently looks like this:

import Vue from 'vue'
import Vuex from 'vuex'
import VuexPersist from 'vuex-persist'

import rstruth from './rstruth'

Vue.use(Vuex)

const vuexLocal = new VuexPersist({
  key: 'my-app',
  storage: localforage  //or window.localstorage, or localForage, etc
})

export default function () {
  const Store = new Vuex.Store({
    modules: {
      rstruth
    },
    plugins: [vuexLocal.plugin]
  })

  return Store
}

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:7

github_iconTop GitHub Comments

1reaction
ssuesscommented, May 20, 2019

UGH, I just figured out the problem. I needed to directly import localforage into my store’s index.js file, even though it was being imported by my vue-localforage package in my main app index file. So, adding this line to the top of the code above:

import localforage from 'localforage'

Solved my problem, allowing me to just use localforage as my storage type and now making the items store in IndexedDB where all my other items are. Hope this helps someone else out.

0reactions
esticommented, May 20, 2019

I found my mistake. Thought it would be handy to point it here in case someone gets the same error. The import of localforage should be without curly braces:

import localForage from 'localforage';

The reason is, apparently, because the module is exported as ‘default’ not as ‘named module’. (I’m still not too familiarized with ES6 as to understand it completely).

Read more comments on GitHub >

github_iconTop Results From Across the Web

Uncaught ReferenceError: localforage is not defined #624
I copied a project (including the node_modules file) to another computer. The project works totolly fine in the old computer, but i got...
Read more >
ReferenceError: localforage is not defined | localforage.getItem()
I am getting an error (ReferenceError: localforage is not defined) when using the below code. app.service('cacheService', function () {.
Read more >
undefined variable localforage in angular2/typescript project
I'm new to typings and angular2. With the typings commands, I added the Typescript definitions to typings.json "localforage": "registry:dt ...
Read more >
ReferenceError: localStorage is not defined in JavaScript
To solve the "ReferenceError: localStorage is not defined" error, make sure to only use the localStorage object in the browser. The localStorage property...
Read more >
Developers - Help wanted - localforage is not defined -
Coming soon: A brand new website interface for an even better experience!
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found