Error: The "use client" component does not recognize either window or localStorage

Question

Error: The "use client" component does not recognize either window or localStorage

I'm currently working on creating a wrapper function that can be used in every dashboard component.

"use client";

const UserWrapper = ({ children }) => {
  const user = JSON.parse(window.localStorage.getItem("ysg_u"));

  return (
    <div>
      {user?.token ? (
        children
      ) : (
        <div className="min-h-screen flex flex-col justify-center items-center">
          <TbFaceIdError className=" w-8 h-8 mb-2" />
          <p className="font-headliner text-3xl tracking-wider">ACCESS DENIED</p>
          <p className="text-xl -mt-2 font-teko">
            Please{" "}
            <Link href={"/login"} className="text-orange-700 underline">
              Login
            </Link>{" "}
            First
          </p>
        </div>
      )}
    </div>
  );
};

export default UserWrapper;

Removed all the imports for long code. The error is showing but the function works. However, I am having trouble completing the build command in Vercel:

 event compiled client and server successfully in 729 ms (2087 modules)
- error src/components/Wrapper/user.wrapper.js (11:26) @ window
- error ReferenceError: window is not defined
    at UserWrapper (./src/components/Wrapper/user.wrapper.js:22:29)
   9 | 
  10 | const UserWrapper = ({ children }) => {
> 11 |   const user = JSON.parse(window.localStorage.getItem("ysg_u"));
     |                          ^
  12 | 
  13 |   //   useEffect(() => {
  14 |   //     if (!user?.admin) {
- warn The server is running out of memory, restarting to free up memory.
- wait compiling...
- event compiled client and server successfully in 468 ms (2087 modules)

Although I'm using the use client tag, I'm puzzled as to why it keeps indicating that either window or localStorage is undefined.

If I utilize the useEffect and useState hooks solution, it will work. The issue lies in the fact that with every route change, the screen momentarily displays no user data before loading the page because useState takes a few milliseconds to load the localStorage into state initially.

Does anyone have a proper solution to this problem? I'm using Next.js 13.

Thank you ❤️

javascript next.js

Answer 1

Answer №1

When using Next.js, it's important to remember that even client components first render on the server. Therefore, anything browser-specific like localStorage should not be called in a client component body directly; instead, it should be used inside useEffect or event handlers.

To address the page flicker issue you mentioned, consider implementing the following solution:

"use client";

import { useEffect, useState } from "react";

const UserWrapper = ({ children }) => {
  const [user, setUser] = useState();

  useEffect(() => {
    setUser(() => {
      try {
        return JSON.parse(window.localStorage.getItem("ysg_u"));
      } catch (error) {
        return null;
      }
    });
  }, []);

  // Optionally show a loading state:
  if (user === undefined) {
    return null;
  }

  return (
    <div>
      {user?.token ? (
        children
      ) : (
       ...
      )}
    </div>
  );
};

export default UserWrapper;

Avoid trying the window !== "undefined" hack as it may lead to hydration errors.

Answer 2

When using Next.js, it's important to remember that even client components first render on the server. Therefore, anything browser-specific like localStorage should not be called in a client component body directly; instead, it should be used inside useEffect or event handlers.

To address the page flicker issue you mentioned, consider implementing the following solution:

"use client";

import { useEffect, useState } from "react";

const UserWrapper = ({ children }) => {
  const [user, setUser] = useState();

  useEffect(() => {
    setUser(() => {
      try {
        return JSON.parse(window.localStorage.getItem("ysg_u"));
      } catch (error) {
        return null;
      }
    });
  }, []);

  // Optionally show a loading state:
  if (user === undefined) {
    return null;
  }

  return (
    <div>
      {user?.token ? (
        children
      ) : (
       ...
      )}
    </div>
  );
};

export default UserWrapper;

Avoid trying the window !== "undefined" hack as it may lead to hydration errors.

Error: The "use client" component does not recognize either window or localStorage

Answer №1

Similar questions

Achieve dynamic styling and adjust window size using window.open

Steps for executing the npm 'filestream' sample code

What is the recommended method for writing JavaScript scripts with AJAX in a Rails application? How can URLs be incorporated into the script effectively?

Leveraging asynchronous data in a synchronous manner

The Java Servlet change did not trigger an update in the web content

Implementing Mongoose's save() function within Formidable's parse() function in a NextJS API endpoint

What are the steps to execute Mike Bostock's D3 demonstrations?

``req.body is not being properly populated when data is sent using form-data, causing

How can I effectively refresh the provider_token / access token for Discord in NextJS with Supabase Auth?

extract elements from dataset

Having trouble sending JSON data to the server using a POST request

Is it necessary to have the script tag as the first tag in the body of the HTML?

Is it feasible to programmatically click a div button in C# using WebBrowser?

How can I position text in the top right corner of a v-card's v-img component in Vuetify.js?

Is there a way to bypass the initial result when using document.querySelectorAll?

Visual Studio - TypeScript project synchronization issue

JavaScript - incorrect order for compiling

How can I implement a GET request in NextJS 13.4 to fetch all items or by a specific ID? Should I use Response, NextAPIResponse, or NextResponse with the latest App Router features?

Utilize Vue to call a method by providing its name as a string

Complete the modal window form