I'm facing a problem with my project. The problem is ReferenceError: localStorage is not defined. I'm using Nextjs, and Redux with Typescript.

const storedUser: string | null = localStorage.getItem('user');
const user: DisplayUser | null = !!storedUser ? JSON.parse(storedUser) : null;

const storedJwt: string | null = localStorage.getItem('jwt');
const jwt: Jwt = !!storedJwt ? JSON.parse(storedJwt) : null;

I'm facing a problem with my project. The problem is ReferenceError: localStorage is not defined. I'm using Nextjs, and Redux with Typescript.

const storedUser: string | null = localStorage.getItem('user');
const user: DisplayUser | null = !!storedUser ? JSON.parse(storedUser) : null;

const storedJwt: string | null = localStorage.getItem('jwt');
const jwt: Jwt = !!storedJwt ? JSON.parse(storedJwt) : null;

I'm using these 2 variables user and jwt in here initialState

const initialState: AuthState = {
    user: user,
    jwt: jwt,
    isLoading: false,
    isSuccess: false,
    isError: false,
}

And initialState are used in authSlice function

export const authSlice = createSlice({
  name: 'auth',
    initialState,
    reducers: {
        reset: (state) => {
            state.isLoading = false;
            state.isSuccess = false;
            state.isError = false;
        }
    },
})

• javascript
• reactjs
• react-redux
• next.js
• react-typescript

• 1 localStorage is a browser feature. It does not exist in NodeJS. – Pointy Commented Sep 5, 2022 at 18:41
• @Pointy Than you to use it. please give an example. – Md Habibur Rahman Commented Sep 5, 2022 at 18:48
• I do not understand the question. You've provided your own example: localStorage either exists (in browser-side code) or not (in server-side code). – Pointy Commented Sep 5, 2022 at 18:49
• Please check the screenshot. I already add in my post. Actually This error showing in ta client side – Md Habibur Rahman Commented Sep 5, 2022 at 18:53
• Then why does the error say "Server Error"? – Pointy Commented Sep 5, 2022 at 18:55

5 Answers 5

I have a similar issue like this in which I have to get the cart items from the localStorage and pass them to the initial state of redux. I solve it like this below code.

const getFromLocalStorage = (key: string) => {
  if (!key || typeof window === 'undefined') {
      return ""
  }
  return localStorage.getItem(key)
}

And then use it in initial state like below code:

export const initialState = { cartItems: getFromLocalStorage("cartItems") ? JSON.parse(getFromLocalStorage("cartItems") || '{}') : []};

If you are using React.js or Next.js and you want to check :

• if you are on the Browser (which means you can use the localStorage)
• or if you are on the Server (which means you cannot use localStorage)

You need to check if the window variable is not undefined, example :

if (typeof window !== 'undefined') {
  console.log('You are on the browser')
  //