NextJs is throwing an error saying that it is unable to read properties of undefined when trying to access 'clearStorage'

I'm currently working on implementing Zustand persist in my Next.js component for local storage functionality. However, I have encountered an issue with a Shadcn UI button causing errors to appear in my terminal:

components/stateInput.tsx (40:75) @ clearStorage
TypeError: Cannot read properties of undefined (reading 'clearStorage')

<Button className='destructive-color' onClick={useItemsStore.persist.clearStorage}>Clear Storage</Button>

To resolve this problem, I attempted the following solution:

const clearStorage = (): void => {
    useItemsStore.persist.clearStorage();
}
...
<Button className='destructive-color' onClick={clearStorage}>Clear Storage</Button>
next.jslocal-storagezustand

Answer №1

It's a mystery, but it somehow functions

const clearStorage = (): void => {
    useItemsStore.persist.clearStorage();
}

Try restarting NextJs, wait for a brief moment, refresh the page... and if needed, restart NextJs once more...

Fingers crossed that NextJs will operate quicker on the next run...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to pass a URL as a prop in Next.js without encountering the issue of it being undefined

Within my file (handlers.ts), I have a function designed to post data to a dynamic API route while utilizing the app router. This function requires values and a URL for fetching. However, when I pass the URL as a prop like this: http://localhost:3000/unde ...

reactjstypescriptnext.jsapp-router

Having trouble getting Tailwind to work with NextJS and bun.sh?

As an intermediate level web developer, I recently came across BunJS and decided to give it a try. Currently, I am working on NextJS with bun and attempting to install Tailwind CSS on it. However, I encountered the issue that Tailwind CSS does not have off ...

reactjsnext.jstailwind-cssbun

The "404 not found" page is not functioning properly within the NextJS app routing system

If a page doesn't exist, I want to redirect to the 404 page. I followed the steps outlined in this guide and here is my code located in app/[slug]/page.tsx import { notFound } from 'next/navigation'; import { getPage } from "@/sanity/ut ...

next.jshttp-status-code-404

When utilizing styled-jsx alongside postcss, experiencing issues with styles failing to reload or rebuild

I'm currently using postcss in conjunction with styled-jsx. In my setup, I have multiple CSS files that I'm importing using the @import directive within the _app.js file. Everything seems to work smoothly, except when I modify any of the CSS file ...

javascriptreactjsnext.jsstyled-jsx

The getServerSession() method in NextAuth fails to retrieve all of the user fields when called in an API route

I am currently working on implementing an API route where I need to verify the user's authentication status and check if they are an admin. As part of this process, I attempted to utilize the getServerSession method, however, it returned a session wit ...

reactjsnext.jsnext-auth

Start by retrieving information and then sending properties to a different component

I have been struggling with this issue for more than a week now. Despite thorough reading of the Next.js documentation and extensive online research, I still can't figure out what's wrong. It seems like I must be overlooking something important, ...

javascriptreactjse-commercenext.js

Generate dynamic routes in Next.js only when needed

I'm currently working on a project using NextJS to create a frontend for a database that contains thousands of products, with the expectation of significant growth. The site/products/ route is functioning well, but I wanted to add a route to view indi ...

javascriptreactjsnext.js

Transitioning Apollo Server from version 3 to version 4 within a next.js environment

Previously in v3, you could define "createHandler" like this: export default async (req, res) => { await startServer; await apolloServer.createHandler({ path: "/api/graphql", })(req, res); }; However, in v4, this is no longer possi ...

typescriptnext.jsgraphqlprismaapollo-server

I'm seeing a message in the console that says "Form submission canceled because the form is not connected." Any idea why this is happening?

For the life of me, I can't figure out why this code refuses to run the handleSubmit function. Essentially, the form is supposed to take an input and execute the handleSubmit function upon submission. This function then makes a POST request to an API ...

javascriptnext.js

React application experiencing incorrect hexadecimal hash value output in crypto function

In my Reactjs app rendered by Nextjs, I am confused about why I am receiving different hash values in the web browser when using this code: crypto.createHash('sha256').update("12345678").digest("hex"); The expected hash value from the sha256 on ...

reactjsnext.js

Ways to alter the font style within TinyMCE

To adjust the font, one option is to utilize the content_styles property like so: content_style: ` body { font-family: whateva; } `, An issue with this method is that since the editor loads within an iframe, fonts already present on the page may n ...

next.jstinymce

How can I ensure server-side rendering for every request in NextJS deployed on Vercel platform?

When working with Next 13 deployed to Vercel, I encountered an issue where calling an API server-side using a vendor library resulted in Vercel not recognizing that a fetch was happening, thus generating a static page. Is there a way to ensure the page is ...

next.jsvercelreact-server-components

Displaying error messages in React Hook Form when passing state

After reviewing the responses below, I have updated my code as follows: import { useState } from "react"; import Head from "next/head"; import Link from "next/link"; import Image from "next/image"; import Background ...

reactjsformsnext.jsreact-hook-form

Using the <video /> tag on a Next.JS page generated on the server side leads to hydration issues

My Next.js app's index page is rendered on the server side by default. During development, I encountered an error that stated: Unhandled Runtime Error Error: Hydration failed because the initial UI does not match what was rendered on the server. Wa ...

javascripthtmlnext.js

Tips for showcasing the information from a JSON document in React

I have a JSON file stored statically in my public directory and I'd like to show its content within a React component (specifically NextJS). The goal is to simply render the JSON as it is on the page. import data from '../../public/static/somedat ...

jsonreactjstypescriptreact-reduxnext.js

Troubleshooting Vercel's caching of CORS headers across different domains

I currently have a Next.js API hosted on Vercel that is being utilized by various domains. One issue I'm facing is when the browser sends the If-None-Match header, Vercel replies with a 304 status; however, the Access-Control-Allow-Origin header may ...

cachingnext.jscorsvercelhttp-status-code-304

Is there a way for me to access my secondary balance on MetaMask?

I am looking for a way to retrieve the balances of HPB and ESR from an account. Can you provide me with a solution? https://i.stack.imgur.com/3J25O.png ...

next.jsblockchainethereum

Struggling to publish my Next.js app on Vercel. Any suggestions on how to proceed?

I have been facing an issue with my Next.js project. It runs smoothly on localhost, but I encountered a problem when trying to deploy it on Vercel. Below are the errors that I received: npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! ...

reactjsnext.jsdeploymentvercel

I am having trouble getting the exit animation to work in Framer Animation, despite using AnimatePresence, motion.div, and a unique key

Hello and thank you for taking the time to read this! :D I'm currently facing an issue with getting Framer Motion to work properly. My code seems to be functioning well for all features except for the exit animation. I have assigned a unique key as w ...

reactjsnext.jsnext.js13framer-motion

Creating individual product pages from an array of objects: A step-by-step guide

Is there a way in Next.js to create individual pages for each object in an array with unique URLs? Here is the input array: Input Array const products = [ { url: "item-1", id: 1, name: "Item 1", description: "lor ...

javascriptnext.js