Using this library with Nextjs app router

[element-software]

I've successfully used this great package with Nextjs 14 and the app router, but recently have experienced an issue with the Weather card, since it's not a client component. Nextjs 14 requires you to declare use client at the top of the file, and since the Weather card doesn't have it, I get a window is not defined error, specifically in the leaflet package.

Is there a possibility this could be considered when creating components, especially since everything uses hooks? I'm going to fork the repo and try it out to see if my theory is correct. This would apply to pretty much all components.

Thanks

[element-software]

Sorry, my post is not to raise a bug or anything but more a discussion on the 'correct' way of doing things. I have been able to workaround this by using dynamic imports in Nextjs without making changes to hakit/components.

Create a file which imports the hakit component, put use client at the top, and then import the component like below:
const WeatherCard = dynamic(() => import('@/components/Weather'), { ssr: false })

This works for me and doesn't give the window is undefined error that I was previously getting. From reading docs I think this is the correct way to do it.

[element-software]

Hey mate, thanks for your reply.

With Nextjs, client components need to be have use client declared at the top of their file so they work in a browser environment (have access to the window and document objects). I've not tried it like I said I would, but adding use client into every single one of the component files could solve the problem. Everything is basically client-side code whereas with Nextjs 14 and the app router, everything defaults to server side code.

For now I think the dynamic import works well although it's not a pretty solution, but it won't require a refactor of the whole codebase. I'm happy with this solution for now :)

Thanks again!

[element-software]

Here's an example of how I solved this issue with the WeatherCard component. I created a new file index.ts with the below code in my components/Weather folder:

"use client";
import { WeatherCard } from "@hakit/components";

const Weather = () => {
  return (
    <WeatherCard
      entity="weather.forecast_home"
      className="w-full bg-gradient-to-br from-neutral-800 to-neutral-900 text-white rounded-2xl shadow-card shadow-neutral-800"
      onlyFunctionality
      disableRipples
      disableScale
      disableActiveState
      cssStyles={`
      .button-group, h4.title {
        display: none;
      },
      .icon {
        color: #FA9703 !important;
      }
    `}
      xlg={12}
      lg={12}
      md={12}
      sm={12}
      xs={12}
      xxs={12}
      apparentTemperatureAttribute="temperature"
    />
  );
};

export default Weather;

And now I can use this component in my Sidebar component, like below:

"use client";
import dynamic from 'next/dynamic';
import { EntityName } from "@hakit/core";
import Clock from "@/components/Clock";
import Thermostat from "@/components/Thermostat";
import EntityCard from "../EntitiesCard/EntityCard";

const WeatherCard = dynamic(() => import('@/components/Weather'), { ssr: false })

export const Sidebar = ({ children, thermostat }: { children: React.ReactNode, thermostat?: EntityName }) => {
  return (
    <>
      <div>
        {/* Static sidebar for desktop */}
        <div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col h-screen">
          {/* Sidebar component, swap this element with another sidebar if you like */}
          <div className="flex flex-col gap-y-5 overflow-y-auto p-8 pb-4 h-full">
            <div className="flex flex-col">
              <Clock />
            </div>
            <div className="flex flex-1 flex-col w-full">
              <WeatherCard />
            </div>
            {thermostat && (
              <div className="flex flex-1 flex-col w-full">
                <Thermostat entityId={thermostat as EntityName} />
              </div>
            )}
            <EntityCard
              entityId="binary_sensor.bedroom_entrance_motion_sensor_occupancy" showState showTitle
              icon="mdiMotionSensor"
              className="w-full h-48"
            />
          </div>
        </div>

        <div className="relative">
          <div
            className="absolute bg-neutral-900 left-0 top-0 w-screen h-screen opacity-35"
            style={{ zIndex: "-1" }}
          />
          <div className="lg:pl-64">{children}</div>
        </div>
      </div>
    </>
  );
}

[shannonhochkins]

I know that's the solution for next side, however you were mentioning you had other issues? Did you not have the use client directive initially?

[element-software]

That was the main issue I had as explained above, I used the use client directive in the Weather component file which imports the WeatherCard from hakit. I did not have to modify anything in hakit. This solved the issue with leaflet using the dynamic imports.

[shannonhochkins]

It's interesting it points to leaflet as the cause from the WeatherCard, seeing as leaflet is used by the PersonCard and related components, there must be an issue in the output shaking or the tree shaking may not be working correctly, interesting!