Closed rioukkevin closed 2 hours ago
Hi @rioukkevin ! I see the "server error", and I suspect this comes from you using the package in a server component.
Keep in mind that this package uses useContext
and useState
, so it can only be imported from client components (using the directive use client
). You can try importing your file lib/umami.ts
from client components, which should work.
Let me know if that fixes the issue.
Trying now
Oh that's my bad, it was used in a not defined server side or client side layout.tsx so server by default
That's fixed
For anyone else here is my updated code:
// umami.tsx
"use client";
import { FC, PropsWithChildren } from "react";
import { umamiAnalyticsContextFactory as umami } from "umami-analytics-next";
const events = [
"subscribe",
"unsubscribe",
"windowOpen",
"windowClose",
"windowFocus",
"visit",
] as const;
export const { UmamiAnalyticsContext, UmamiAnalyticsProvider, useUmami } =
umami(events);
export const UmamiKey = process.env.NEXT_PUBLIC_UMAMI_KEY! as string;
export const UmamiUrl = process.env.NEXT_PUBLIC_UMAMI_URL! as string;
export const UmamiAnalytics: FC<PropsWithChildren> = ({ children }) => {
return (
<UmamiAnalyticsProvider
src={UmamiUrl}
websiteId={UmamiKey}
autoTrack={false}
>
{children}
</UmamiAnalyticsProvider>
);
};
I am glad it worked ! 🎉
Here is my implementation in a umami.ts file:
I got when running the website with nextJS v14 the following error: `TypeError: (0 , umami_analytics_next__WEBPACK_IMPORTED_MODULE_0__.umamiAnalyticsContextFactory) is not a function``
The full error with capture
Full error: