Unleash / unleash-client-nextjs

Unleash SDK for Next.js
27 stars 8 forks source link

Broken Next.js build: Cannot destructure property 'updateContext' of null #57

Closed danilofuchs closed 9 months ago

danilofuchs commented 12 months ago

Describe the bug

Error occurred prerendering page "/page". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot destructure property 'updateContext' of 'i(...)' as it is null.
    at B (file:///home/danilo/salvy/salvy-dashboard/node_modules/@unleash/proxy-client-react/dist/unleash-react.js:115:26

I think it refers to this line of code: https://github.com/Unleash/proxy-client-react/blob/46fa764e20617e83fd060b15f327c83cfa73fa66/src/useUnleashContext.ts#L5

Steps to reproduce the bug

Create a Next.js project (Pages router)

Add the following provider at the _app.tsx file:

const SessionAwareFlagContextProvider = ({
  children,
}: {
  children: ReactNode;
}) => {
  const updateContext = useUnleashContext();

  useEffect(() => {
    updateContext({
      userId: "fake-user-id",
    });
  }, [updateContext]);

  return <>{children}</>;
};

Expected behavior

No response

Logs, error output, etc.

No response

Screenshots

No response

Additional context

No response

Unleash version

@unleash/nextjs 1.3.0

Subscription type

Open source

Hosting type

Self-hosted

SDK information (language and version)

No response

Tymek commented 12 months ago

Do you have this component wrapped in <FlagProvider>? @danilofuchs

danilofuchs commented 12 months ago

Do you have this component wrapped in <FlagProvider>? @danilofuchs

Yes, it is

danilofuchs commented 12 months ago

The issue was, I was importing

import { FlagProvider } from "@unleash/nextjs/client";
import { useUnleashContext } from "@unleash/proxy-client-react";

whilst the correct is to import it from the same place as FlagProvider. Probably something changed in 1.3.0 and the contexts are not the same

CORRECT:

import { FlagProvider, useUnleashContext } from "@unleash/nextjs/client";