!question I am getting this error when using redux with persistence ```Error storing data TypeError:
!question I am getting this error when using redux with persistence
redux-persist to persist your Redux state, but you are encountering an error that says TypeError: Cannot read properties of undefined (reading 'local'). This error is usually caused by a misconfiguration of the storage option in your persistConfig.storage option is undefined, which means that redux-persist is trying to read the local property of an undefined object. This could happen if you forgot to import the storage library that you are using, or if you misspelled the name of the storage library.redux-persist-webextension-storage to persist your Redux state in a browser extension, make sure that you have installed the library and imported it correctly in your code. Here's an example of how you can configure redux-persist to use redux-persist-webextension-storage:storage from redux-persist-webextension-storage and use it as the storage option in our persistConfig. This should allow redux-persist to correctly store and retrieve your Redux state in the browser's storage.import statement, and will instead use the native ES module system of Chrome 91.import statement to a format that is compatible with Internet Explorer 11.Storage interface provided by @plasmohq/storage. Specifically, it is saying that the getAllKeys property is missing from the StorageInterface type, which is required by the Storage type.@plasmohq/storage to include the StorageInterface type explicitly. Here's an example:persistConfig object to use the StorageInterface type instead of the Storage type:localStorage as StorageInterface, you are telling TypeScript to treat it as if it has the getAllKeys property, even though it is not explicitly defined in the Storage type.chrome.storage as undefined, it means that you have not requested the storage permission in your extension's manifest file. To enable it, you need to add the following line to your manifest.json file:"permissions" field is an array of strings that lists all the permissions that your extension requires. In this case, we are requesting the storage permission.chrome.storage API in your extension without any issues.storage permission explicitly. Plasmo's Storage class abstracts the chrome.storage API and falls back to localStorage when the extension storage API is unavailable. This allows for state sync between extension pages, content scripts, background service workers, and web pages.package.json file. "storage" permission to the "permissions" array in your package.json file. Here's an example:"storage" permission to the "permissions" array. This will allow your extension to use the storage API provided by Plasmo."storage" permission to your package.json file, you can use the @plasmohq/storage library to interact with the storage API. This library abstracts the persistent storage API available to browser extensions and falls back to localStorage when the extension storage API is unavailable.@plasmohq/storage library to store and retrieve data:useStorage hook from the @plasmohq/storage library to store and retrieve data. The useStorage hook takes two arguments: the key to use for storing the data, and the default value to use if there is no existing value for the key.@plasmohq/storage library and adding the "storage" permission to your package.json file, you can easily store and retrieve data in your Plasmo-based browser extension.pnpm create plasmo?/Users/brendanbuono/src/plasmo/cli/create-plasmopnpm unlink -g create-plasmopnpm create plasmo <- it uses the remote version of plasmoexamples directoryimport { persistReducer } from 'redux-persist';
import storage from 'redux-persist-webextension-storage';
const persistConfig = {
key: 'root',
storage,
};
const persistedReducer = persistReducer(persistConfig, rootReducer);import { someFunction } from './myModule.js';
chrome.runtime.onMessage.addListener((message) => {
someFunction(message);
});import { someFunction } from './myModule.js';
chrome.runtime.onMessage.addListener((message) => {
someFunction(message);
});import { combineReducers, configureStore } from "@reduxjs/toolkit"
import {
type TypedUseSelectorHook,
useDispatch,
useSelector
} from "react-redux"
import { syncStorage,localStorage } from "redux-persist-webextension-storage"
import {
FLUSH,
PAUSE,
PERSIST,
PURGE,
REGISTER,
REHYDRATE,
RESYNC,
persistReducer,
persistStore
} from "@plasmohq/redux-persist"
import { Storage } from "@plasmohq/storage"
import appReducer from "./app/appReducer"
const rootReducer = combineReducers({
app: appReducer
})
const persistConfig = {
key: "root",
version: 1,
storage: localStorage
}
const persistedReducer = persistReducer(persistConfig, rootReducer)const persistConfig = {
key: "root",
version: 1,
storage: localStorage as StorageInterface
}{
"name": "My Extension",
"version": "1.0",
"manifest_version": 2,
"permissions": [
"storage"
],
"background": {
"scripts": ["background.js"],
"persistent": false
}
}{
"name": "my-extension",
"version": "1.0.0",
"description": "My awesome extension",
"permissions": [
"storage"
],
"devDependencies": {
"@plasmohq/plasmo": "^1.0.0"
}
}import { useStorage } from '@plasmohq/storage';
const MyComponent = () => {
const [value, setValue] = useStorage('my-key', 'default-value');
const handleClick = () => {
setValue('new-value');
};
return (
<div>
<p>Current value: {value}</p>
<button onClick={handleClick}>Update value</button>
</div>
);
};🔵 INFO | Installing dependencies...
Scope: all 22 workspace projects
/Users/brendanbuono/src/plasmo/cli/create-plasmo:
 ERR_PNPM_WORKSPACE_PKG_NOT_FOUND  In ../../cli/create-plasmo: "@plasmo/config@workspace:*" is in the dependencies but no package named "@plasmo/config" is present in the workspace