umamiAnalyticsContextFactory is not a function

[rioukkevin]

Here is my implementation in a umami.ts file:

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;

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:

 ⨯ src/lib/umami.ts (13:9) @ events
 ⨯ TypeError: (0 , umami_analytics_next__WEBPACK_IMPORTED_MODULE_0__.umamiAnalyticsContextFactory) is not a function
    at eval (webpack-internal:///(rsc)/./src/lib/umami.ts:19:151)
    at (rsc)/./src/lib/umami.ts (/Users/kevinriou/Workspace/ME/groot/.next/server/app/[locale]/page.js:943:1)
    at __webpack_require__ (/Users/kevinriou/Workspace/ME/groot/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(rsc)/./src/app/layout.tsx:16:68)
    at (rsc)/./src/app/layout.tsx (/Users/kevinriou/Workspace/ME/groot/.next/server/app/[locale]/page.js:920:1)
    at Function.__webpack_require__ (/Users/kevinriou/Workspace/ME/groot/.next/server/webpack-runtime.js:33:43)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async collectGenerateParams (/Users/kevinriou/Workspace/ME/groot/node_modules/next/dist/build/utils.js:921:21)
    at async Object.loadStaticPaths (/Users/kevinriou/Workspace/ME/groot/node_modules/next/dist/server/dev/static-paths-worker.js:46:13) {
  type: 'TypeError',
  page: '/favicon.ico'
}
  11 |
  12 | export const { UmamiAnalyticsContext, UmamiAnalyticsProvider, useUmami } =
> 13 |   umami(events);
     |         ^
  14 |
  15 | export const UmamiKey = process.env.NEXT_PUBLIC_UMAMI_KEY! as string;
  16 | export const UmamiUrl = process.env.NEXT_PUBLIC_UMAMI_URL! as string;

[gndelia]

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.

[rioukkevin]

Trying now

[rioukkevin]

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>
  );
};

[gndelia]

I am glad it worked ! 🎉