Client Component doesn't work

[0x0range]

In Next@12 I was able to import a Clientcomponent with dynamic import and set ssr to false. Then I was able to access for example the window object.

In Next@13 I thought I would be able to access the window object in components who has the "use client" flag but I get an error that window is not defined. So I guess there is happening some serverside stuff because the window object is not defined.

[icyJoseph]

There's confusion about the client directive. It means that this component, also runs on the client. I've seen a lot of material out there which says only. Rather client components are like the components we wrote before. In order to send a full HTML frame from the server, client components run on the server too!

This bit from the next.js docs:

Client Components are rendered on the client. With Next.js, Client Components can also be pre-rendered on the server and hydrated on the client.

I'll keep on investigating but for sure, unguarded DOM access in an SSR context still seems fishy.

Edit notes

• Even though the server fails and the first HTML frame is not meaningful, the client seems to champion on!
• Unfortunately, the error causes the siblings and children to be impacted, pretty much any code after the offending bit never runs

[0x0range]

There's confusion about the client directive. It means that this component, also runs on the client. I've seen a lot of material out there which says only. Rather client components are like the components we wrote before. In order to send a full HTML frame from the server, client components run on the server too!

This bit from the next.js docs:

Client Components are rendered on the client. With Next.js, Client Components can also be pre-rendered on the server and hydrated on the client.

I'll keep on investigating but for sure, unguarded DOM access in an SSR context still seems fishy.

Edit notes

• Even though the server fails and the first HTML frame is not meaningful, the client seems to champion on!
• Unfortunately, the error causes the siblings and children to be impacted, pretty much any code after the offending bit never runs

Thank you. I would like to use leaflet (react-leaflet) and it uses the window object. In the past I was able to just import it dynamicly with ssr set to false. This feature doesnt work with the new app scaffolding. I get an error when I use next/dynamic to import the "Clientside Component" in the app folder.

Error: ctor is not a function

Do you have an how to get packages working which use the window obejct?

[icyJoseph]

You could always do an ugly hack, and put them behind a flag which is set inside use-effect. At least for the time being. Pretty much as documented here: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85#option-2-lazily-show-component-with-uselayouteffect

Wrap it with a parent that just sets a flag to true inside use-effect, when that's true you run your component. I reckon there's tons of libraries out there which assume CSR is the only use case, but forget about SSR. Dynamic imports were great to keep on using those, but it does seem like since suspense boundaries are awaited on the server, we cannot use the solution anymore. As of now anyway.

[dejurin]

This work, thank you for example.

[benoitv-code]

Thanks for the question, and thanks for the answer!

I had the same issue with leaflet, and I noticed that dynamic() wasn't working anymore with the Next.js 13 app/ folder structure.

Initializing the component inside useEffect() solved the issue client-side, but it still displayed a ReferenceError: window is not defined error server side. This is because having a top-level import L from "leaflet"; in a component imported server-side causes leaflet to run initialization code server-side too (and it seems to use window for initialization).

To solve the issue, I had to either:

(Method 1) Use a component whose sole purpose is to lazy load the leaflet component:

• Map.tsx (displayed by the server-side code):

"use client";

import { NextPage } from "next";
import { lazy, useEffect, useState } from "react";

const ClientSideMap = lazy(() => import("./ClientSideMap"));

export const Map: NextPage = () => {
  const [isClientSide, setClientSide] = useState(false);

  useEffect(() => {
    setClientSide(true);
  }, []);

  if (!isClientSide) {
    // You can show some kind of placeholder UI here
    return null;
  }

  return <ClientSideMap />;
};

• ClientSideMap.tsx (lazy loaded by <Map />):

"use client";

import { useEffect, useRef } from "react";
import L, { Map } from "leaflet";
import { NextPage } from "next";

import "leaflet/dist/leaflet.css";

const ClientSideMap: NextPage = () => {
  const ref = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    let map: Map | null = null;

    if (ref.current) {
      map = L.map(ref.current, {
        center: [49.8419, 24.0315],
        zoom: 16,
        layers: [
          L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
            attribution:
              '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
          }),
        ],
      });
    }

    return () => {
      if (map) {
        map.off();
        map.remove();
      }
    };
  }, [ref]);

  return <div ref={ref} style={{ height: "100vh" }} />;
};

export default ClientSideMap;

(Method 2) Or use a dynamic import('leaflet'); in useEffect():

"use client";

import { useEffect, useRef, useState } from "react";
import type Leaflet from "leaflet";
import { NextPage } from "next";

import "leaflet/dist/leaflet.css";

export const CustomMap: NextPage = () => {
  const ref = useRef<HTMLDivElement | null>(null);

  const [L, setLeafletInstance] = useState<typeof Leaflet | null>(null);

  // Import Leaflet client side
  useEffect(() => {
    let isUnmounted = false;

    (async () => {
      const instance = await import("leaflet");
      if (!isUnmounted) {
        setLeafletInstance(instance);
      }
    })();

    return () => {
      isUnmounted = true;
      setLeafletInstance(null);
    };
  }, []);

  // Initialize the map dom once Leaflet has successfully been imported
  useEffect(() => {
    let map: Leaflet.Map | null = null;

    if (ref.current && L) {
      map = L.map(ref.current, {
        center: [49.8419, 24.0315],
        zoom: 16,
        layers: [
          L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
            attribution:
              '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
          }),
        ],
      });
    }

    return () => {
      if (map) {
        map.off();
        map.remove();
      }
    };
  }, [ref, L]);

  return <div ref={ref} style={{ height: "100vh" }} />;
};

Both patterns are quite ugly, I hope there is / there will be another (better) approach to import some components client-side only.

Edit: Added "Method 2 - Using a dynamic import('leaflet'); in useEffect()"

[junioryono]

Amazing, clean code.

[dejurin]

I also not finding answer on this question.
This is important to me, I use browser localStorage.

[ashreyas431]

I am facing the same issue

[icyJoseph]

You have to synchronize with local storage within use-effect, and callback functions.

You cannot initialize state to read directly from local storage because there's no such thing in the server. And to a lesser extent because that'd make the component impure.

You can also make a component render behind a flag that's activated client side, again within a use-effect, or by dynamically loading the component with next/dynamic and such.

The key thing is that you'd need to avoid SSR for these.

• https://demystifying-rsc.vercel.app/client-components/no-ssr/
• https://demystifying-rsc.vercel.app/client-components/next-dynamic/

[ashreyas431]

I created a hook for accessing my local storage it still throws build errors im attaching the code and its usage example below
`import { Dispatch, SetStateAction, useEffect, useState } from "react";

type UseLocalStorageReturn = [T, Dispatch<SetStateAction>];

const useLocalStorage = (
key: string,
initialValue?: T
): UseLocalStorageReturn => {
// Ensure initialValue is never undefined, provide a fallback value if necessary
const fallbackValue =
initialValue !== undefined ? initialValue : () => undefined as T;

const [storedValue, setStoredValue] = useState(() => {
try {
const localWindow = typeof window !== "undefined" ? window : null;
if (localWindow) {
const item = localWindow.localStorage.getItem(key);
return item ? JSON.parse(item) : fallbackValue;
}
} catch (error) {
console.error("Error retrieving data from localStorage:", error);
}
return fallbackValue;
});

useEffect(() => {
const localWindow = typeof window !== "undefined" ? window : null;
if (localWindow) {
try {
const item = localWindow.localStorage.getItem(key);
const value = item ? JSON.parse(item) : fallbackValue;
setStoredValue(value);
} catch (error) {
console.error("Error updating localStorage value:", error);
}
}
}, [key, fallbackValue]);

const setLocalStorageValue: Dispatch<SetStateAction> = (value) => {
setStoredValue(value);
const localWindow = typeof window !== "undefined" ? window : null;
if (localWindow) {
try {
localWindow.localStorage.setItem(key, JSON.stringify(value));
} catch (error) {
console.error("Error updating localStorage:", error);
}
}
};

return [storedValue, setLocalStorageValue];
};

export default useLocalStorage;
`

USAGE============================

const [userData] = useLocalStorage<{ id: number; name: string; }>("userData", { id: 0, name: "Admin", });
could you help me out here

[icyJoseph]

First modify it like this:

const [storedValue, setStoredValue] = useState(fallbackValue) 

// a useLayoutEffect might be needed here, to prevent painting with fallbackValue is not needed
// you can implement useIsomorphicLayoutEffect https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect#hook
// if not used correctly, this could, in some cases, make the app a bit slower 
useEffect(() => {
// sync with actual local storage
  try {
       const item = localStorage.getItem(key);
  
       if (!item) return; // value is already fallback
  
       const value = JSON.parse(item);
       setStoredValue(value);
     } catch (error) {
       console.error("Error updating localStorage value:", error);
      // data might be malformed in the local storage
    }
  }
}, [key]);

return [storedValue, setLocalStorageValue] as const;

I see you are also doing () => undefined as T kind of casting, that's surely not a good idea.