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

Create an interface property that can accommodate various disparate types

Determining the distance between two points in miles using Next.js

The young one emerges within the SecurePath component temporarily

Having trouble iterating over fields of an interface in TypeScript?

Next.js encountered an issue when trying to read properties of null, specifically the 'push' property, resulting in a TypeError

Sharing data with child components in Next.js through getStatisticProps

Discover the proper technique to display an error message in cases where no data is detected during the filtering process

Creating an executable JAR for your Next.js application: A step-by-step guide

405 we're sorry, but the POST method is not allowed on this page. This page does

Why does the Formik form only validate after the second button click in this React Hooks, TypeScript, Formik, NextJS setup?

Function Type Mapping

Creating Empathetic User Experiences with Next 12 and SWC: A Guide to Harnessing import.meta.url

Using Tailwind CSS to center a NexJS <Image /> component within a modal

Steer clear of receiving null values from asynchronous requests running in the background

Create a rectangle on the canvas using the Fabric.js library in an Angular application

Looking to implement server-side rendering with Next.js using [id].js in headless WordPress? Utilize GraphQL to fetch a single page from WordPress and create a service in the format of service/[id

A custom hook is not functioning as expected

Utilizing the useSelect hook in Typescript to create custom types for WordPress Gutenberg, specifically targeting the core/editor

Angular makes it easy to extract multiple parameters from a URL

Do I have to wait for the HTTP get request to access the fetched object property?