Error: Vercel deployment of Next.Js app fails due to undefined localStorage

Question

Error: Vercel deployment of Next.Js app fails due to undefined localStorage

Encountering the issue

ReferenceError: localStorage is not defined

when attempting to deploy my Next.JS app on Vercel.

const NewReserve: React.FC = () => {
  const setValue = (key: string, value: string) => {
    return localStorage.setItem(key, value);
  };

  const getValue = (key: string) => {
    return JSON.stringify(localStorage.getItem(key));
  };

  const returnPersistentValue = (key: string) => {
    if (getValue(key) === "null") return "";
    else return getValue(key).replace('"', "").replace('"', "");
  };

...

The reason for this error is likely due to the fact that Vercel's deployment system operates on the server-side, causing both window and localStorage to be undefined, resulting in the reference error. How can I go about resolving this issue?

typescript next.js vercel

Answer 1

Answer №1

To ensure the proper functioning of the code, it is important to first verify the existence of the window:

  const storeData = (key: string, value: string) => {
    return typeof window !== "undefined" ? localStorage.setItem(key, value) : undefined;
  };

  const retrieveData = (key: string) => {
    return typeof window !== "undefined" ? JSON.stringify(localStorage.getItem(key)) : null;
  };

Answer 2

To ensure the proper functioning of the code, it is important to first verify the existence of the window:

  const storeData = (key: string, value: string) => {
    return typeof window !== "undefined" ? localStorage.setItem(key, value) : undefined;
  };

  const retrieveData = (key: string) => {
    return typeof window !== "undefined" ? JSON.stringify(localStorage.getItem(key)) : null;
  };

Error: Vercel deployment of Next.Js app fails due to undefined localStorage

Answer №1

Similar questions

Unexpected behavior observed with Angular Toggle Button functionality

Embrace the flexibility of using Next.js with or without Express.js

How come the props aren't being passed from the parent to the child component? (React / TypeScript)

Unlock the power of TypeScript's inheritance by utilizing static methods for type

Images on NextJS are failing to resize properly in Next 13

A step-by-step guide on executing a callback function once the animation has finished with frame-motion

Intriguing flashing dark streak, reminiscent of a boundary within NextJS

Custom Map Typescript Interface

Struggling to retrieve the image URL from a TypeScript file

Using TypeScript to return an empty promise with specified types

Typescript Next.js Project with Custom Link Button Type Definition

Reverting a React-Select child component back to its default values from the parent component

Using callback functions to initiate server actions

The project's dependencies must include '@material-ui/core'

It appears there was a mistake with [object Object]

What is the simplest way to incorporate Vue with Typescript, without the need for a complex build setup?

Error TRPCClient: The unexpected presence of the token "'<'", ""<!DOCTYPE "... invalidates the JSON format within Next.JS

"Exploring the seamless integration of Next.js and Material UI for stunning web

Enums are not recognized by TypeScript when used within an array

I encountered a sudden halt in functionality with my NextJs useState feature