Next.js Discord

Discord Forum

Local storage

Answered
Encyrtid wasp posted this in #help-forum
Open in Discord
Avatar
Encyrtid waspOP
Hi, I'm trying to access the local storage in my helper.ts file, however I have this error :
Error: localStorage is not defined
How can I accomplish that ?
Answered by B33fb0n3
no, because it needs the local storage. The server (server component) don't know any local storage. Because of that, it need to be importated like that and need to be clientside
View full answer

29 Replies

Avatar
B33fb0n3
localStorage is only available in client component. You added use client on top?
Avatar
Encyrtid waspOP
Yes but then I have an error when calling the function in my helper file TypeError: (0 , _lib_helper__WEBPACK_IMPORTED_MODULE_3__.testFunction) is not a function
Avatar
B33fb0n3
try to import the component that need the helper function like this:
const ComponentC = dynamic(() => import('path/to/Component'), { ssr: false })
Avatar
Encyrtid waspOP
You mean I should import the helper file this way ?
Avatar
B33fb0n3
nah, only the component that uses your helper
Avatar
Encyrtid waspOP
Oh okay, but I'm using the function in the server component of my page
Avatar
Encyrtid waspOP
Should I call it in a client component ?
Avatar
B33fb0n3
yea, localStorage is only available in client component.
Avatar
Encyrtid waspOP
And then call my client component in my server one ?
Avatar
Encyrtid waspOP
I created this function in a file
"use client";

export const getLocalStorage = (key: string) => {
  return localStorage.getItem(key);
};

Then I call it in my helper file (which is not a client component)
export const testFunction = () => {
  const test = getLocalStorage("test");
  console.log(test);
};

But I still have this error (0 , _client_helper__WEBPACK_IMPORTED_MODULE_2__.getLocalStorage) is not a function
Avatar
B33fb0n3
try to import the component that need the helper function like this:
const ComponentC = dynamic(() => import('path/to/Component'), { ssr: false })
Avatar
Encyrtid waspOP
Promise<typeof import("...mypath")>' is not assignable to parameter of type 'DynamicOptions<{}> | Loader<{}>'.
Avatar
B33fb0n3
which one did you try now? testFunction or getLocalStorage?
Avatar
Encyrtid waspOP
importing getLocalStorage in the helper file (which contain the testFunction)
Avatar
B33fb0n3
can you give me an reproduction repo? For example through jsfiddle or https://codesandbox.io/ ?
Avatar
Encyrtid waspOP
Sure let me 15min
Avatar
Encyrtid waspOP
Avatar
B33fb0n3
I modified your repo a bit to make it work: https://codesandbox.io/p/devbox/vibrant-wilbur-nd5fg5
You can see, that you need to import the Component that uses the helper function without SSR. After that, there are no more errors
Avatar
Encyrtid waspOP
I still see the errors
weird
Avatar
B33fb0n3
Whoops, I shared the wrong link. This is the right one: https://codesandbox.io/p/devbox/epic-panka-xykssv
Avatar
Encyrtid waspOP
My page.tsx is a server component 🥲
Avatar
B33fb0n3
I changed the code, so page.tsx is not a client component anymore
Avatar
Encyrtid waspOP
Thanks, can SomeComponent.tsx be a server component too ?
Avatar
B33fb0n3
no, because it needs the local storage. The server (server component) don't know any local storage. Because of that, it need to be importated like that and need to be clientside
Answer
Avatar
Encyrtid waspOP
Ok, So I need to create a client component and then inside of it I have to call my function then ?
Avatar
B33fb0n3
yes
Avatar
Encyrtid waspOP
okay thanks 🙂
Avatar
B33fb0n3
sure thing