Unable to run when using useLocalStorage (Vite)

[RoyRao2333]

Just got this error and my project crashed:

My code:

const userTokenStorageKey = 'USER_TOKEN_STORAGE_KEY';
// Remove this and the project can run properly.
const [, setUserToken] = useLocalStorage<string>(userTokenStorageKey);

const onFinish = useCallback(
    async (values) => {
      // ......
      if (success) {
        if (data.token) {
          setUserToken(data.token);
        }
      }
    },
    [setUserToken],
  );

[justinmahar]

Is this still an issue? I've been using this library in multiple projects with no issues like this. The code itself for the library is just a hook that's being exported, nothing fancy. Was this error during development, or after your app was built, bundled and deployed? Are you using any particular framework for your app?

[RoyRao2333]

@justinmahar

Thanks for the reply!

So my project is basically written with Vite + React, and nothing particular I guess. This issue is happening during dev, which literally prevents me from running my project.

[justinmahar]

Not sure if it's related, but I just ran into SSR issues using localStorage in production. Just shipped a new version of the library to fix that and SSR issues are history.

To get the latest:

npm i react-storage-complete@latest

[RoyRao2333]

@justinmahar

Thanks for the effort, but it's still no luck with the latest version... 😢

Don't know if this issue is related with Vite or React Router?

[justinmahar]

Closing for now

[joe-noumena]

I am getting the same thing on a Vite project react-storage-complete.js?v=55b96d91:420 Uncaught TypeError: events_1.default is not a constructor

at node_modules/react-storage-complete/dist/hooks/useBrowserStorage.js (react-storage-complete.js?v=55b96d91:420:35)
at __require2 (chunk-AUZ3RYOM.js?v=55b96d91:18:50)
at node_modules/react-storage-complete/dist/index.js (react-storage-complete.js?v=55b96d91:502:18)
at __require2 (chunk-AUZ3RYOM.js?v=55b96d91:18:50)
at react-storage-complete.js?v=55b96d91:507:16

Works fine on a webpack project.

[RoyRao2333]

@joe-noumena

Thanks for the clarification! So it seems a Vite issue then? @justinmahar

[JoeGaffney]

@RoyRao2333 yeah it seems to be maybe esm issue.

I am trying https://www.npmjs.com/package/use-local-storage-state on the vite project which seems to work. Although not as many features as this package

[justinmahar]

Do either of you have any idea what the heck might be going on with this? I'd love to fix this. I'm bundling 10+ other libraries for npm the exact same way as this one

[justinmahar]

Leaving this here for later, but I think updating the tsconfig for this project might be a start

use-storage-complete tsconfig (this project, working with webpack, issues with Vite)

• https://github.com/justinmahar/react-storage-complete/blob/master/tsconfig.json

use-local-storage-state tsconfig (works with Vite)

• https://github.com/astoilkov/use-local-storage-state/blob/main/tsconfig.json

notes

• https://medium.com/dazn-tech/publishing-npm-packages-as-native-es-modules-41ffbc0a9dea

I'm using cjs, maybe I need to bump that up to esm for this project and all others

[cod3rboy]

Facing the same issue on vite+react+ts project.

[justinmahar]

I ran into some React hydration issues in a Gatsby project (stoicdevotional.com) using this library with the latest React+Gatsby, and I believe I found and fixed the issue as a result. Storage is now initialized after an effect completes. This solved the issues in my project, might do the same for yours. Let us know if you do end up trying it out and it works for you.

To get the latest version:

npm i react-storage-complete@latest