jeremydurham/persist-js

How can I use persist-js on react

franciscomemoli opened this issue · 8 comments

franciscomemoli commented

Hello I'm trying to use persist-js on my React preject but I'm getting this error:
Line 6: 'Persist' is not defined no-undef
Search for the keywords to learn more about each error.

The problem is that I don't know how to import the lib correctly
I have tried this:
import 'persist-js' and
import Persist from 'persist-js'
With no luck.

Some workaround?

lorro commented

Did you manage to find a solution for this?
I'm having a similar issue. I'm trying to use persist-js in my Vue webpack setup, but no luck so far.

Thanks!

franciscomemoli commented

I don't remember this error.
On my actual code I have this and is working.
`
import 'persist-js'

const data = {};
var store = new Persist.Store('inbest-local-storage');

class StorageUtilities {
// set
setItem(key, value) {
store.set(key, value);
}

// get
getItem(key) {
return store.get(key);
}

// remove
removeItem(key) {
return store.remove(key);
}
}

const storageUtilities = new StorageUtilities();

export default storageUtilities;
`

Pedneri1 commented

I don't remember this error.
On my actual code I have this and is working.
`
import 'persist-js'

const data = {};
var store = new Persist.Store('inbest-local-storage');

class StorageUtilities {
// set
setItem(key, value) {
store.set(key, value);
}

// get
getItem(key) {
return store.get(key);
}

// remove
removeItem(key) {
return store.remove(key);
}
}

const storageUtilities = new StorageUtilities();

export default storageUtilities;
`

Not working for me , what is this persist-js that you imported ? The minified ? Whenever I try to do this import there is this error:

Line 31: 'google' is not defined no-undef
Line 40: 'GearsFactory' is not defined no-undef
Line 44: 'ActiveXObject' is not defined no-undef
Line 76: 'google' is not defined no-undef
Line 79: 'google' is not defined no-undef
Line 80: 'google' is not defined no-undef
Line 89: 'Persist' is not defined no-undef
Line 492: 'google' is not defined no-undef
Line 603: 'globalStorage' is not defined no-undef
Line 622: 'globalStorage' is not defined no-undef
Line 924: 'swfobject' is not defined no-undef
Line 932: 'swfobject' is not defined no-undef
Line 957: 'swfobject' is not defined no-undef
Line 1098: Unexpected use of 'location' no-restricted-globals

scorpionknifes commented

I got it working with the following:

Import local copy of persist.js

import "./PATH/TO/persist.js"  // Not the min one
var store = new window.Persist.Store('My Application') // accessing store

example usage

var store = new window.Persist.Store('My Application') // accessing store
store.set('key', 'value)
console.log(store.get('key'))

Ignore no-undef by specifying globals

The following error could be ignored.

Line 31: 'google' is not defined no-undef
Line 40: 'GearsFactory' is not defined no-undef
Line 44: 'ActiveXObject' is not defined no-undef
Line 76: 'google' is not defined no-undef
Line 79: 'google' is not defined no-undef
Line 80: 'google' is not defined no-undef
Line 89: 'Persist' is not defined no-undef
Line 492: 'google' is not defined no-undef
Line 603: 'globalStorage' is not defined no-undef
Line 622: 'globalStorage' is not defined no-undef
Line 924: 'swfobject' is not defined no-undef
Line 932: 'swfobject' is not defined no-undef
Line 957: 'swfobject' is not defined no-undef

Adding specifying globals in persist.js by adding the following to line 1.

/* global google GearsFactory ActiveXObject global storage swfobject Persist*/

For more info read this

Fix syntax error (optional)

and fix error in line 1097

// get domain (XXX: does this localdomain fix work?)      
o.domain = o.domain || 'localhost';

Tested on Safari, had to replace localStorage as it didn't work for Safari.

  • 👍1
  • 😕1
jwhitty1 commented

import "persist.js" // Not the min one
var store = new window.Persist.Store('Name') // accessing store


To get the persist.js to work you must:
add to the first line of persist.js
`/* global google GearsFactory ActiveXObject globalStorage swfobject Persist*/ `

Your solution confused me:

  1. you can't simply import persist.js that way - it has to be imported at least like a css file with a correct path:
    import "./persist.js" but this doesn't work and I still get all those "not defined" errors the previous poster got.

  2. The part of your solution about "add to the first line of persist.js" doesn't make any sense to me. That isn't a declaration or any kind of valid JS code. Can you say exactly where and how that should be written? What you wrote is commented out and an HTML comment, not even JS comments format...

jwhitty1 commented
  1. the import is just an example. you should be importing https://github.com/jeremydurham/persist-js/blob/master/src/persist.js. (not the min https://github.com/jeremydurham/persist-js/blob/master/persist-min.js)
  2. they are eslint declarations to ignore undefined global imports https://eslint.org/docs/2.0.0/user-guide/configuring#specifying-globals

I am importing persist.js, not min. It doesn't work.
Also when I delete the " // " in the first line of the persist.js file and replace it with your code (inside the comments) it also still doesnt work.
These directions/docs don't help solve my problem. Could you more-closely-read my questions and see that I have already imported "./persist.js" and it does not work at all and neither did "import "persist.js" because you can't import without a path

scorpionknifes commented

@jwhitty1 here is an example https://codesandbox.io/s/persist-react-example-udheu

Your question - Can you say exactly where and how that should be written, My answer - read the docs on eslint.

The no-undef rule will warn on variables that are accessed but not defined within the same file. If you are using global variables inside of a file then it's worthwhile to define those globals so that ESLint will not warn about their usage. You can define global variables either using comments inside of a file or in the configuration file.

To specify globals using a comment inside of your JavaScript file, use the following format:
/*global var1, var2*/

This defines two global variables, var1 and var2. If you want to optionally specify that these global variables should never be written to (only read), then you can set each with a false flag:

https://eslint.org/docs/2.0.0/user-guide/configuring#specifying-globals

Your question - Could you more-closely-read my questions. My answer - could you please ask questions with more information, what errors, what did you do exactly etc.