Cannot read properties of null (reading 'getValue')

[SabineJakubinek]

We would like to use Flagsmith with Plasmic and SSR. When running "yarn build" I get the following error:"Generating static pages (0/1)PLASMIC: Encountered error when pre-rendering TweetsProvider: TypeError: Cannot read properties of null (reading 'getValue')"

This is my code for testing, which is mostly from the documentation of Plasmic.

import { DataProvider, usePlasmicQueryData } from "@plasmicapp/loader-nextjs";
import { useFlags } from "flagsmith/react";

export function TweetsProvider(props: { children: React.ReactNode }) {
  const flags = useFlags(["google-analytics-tracking"]);
  if (flags["google-analytics-tracking"].enabled) {
    console.log("Google Analytics enabled");
  }
  const { children } = props;
  const { data } = usePlasmicQueryData("/tweets", async () => {
    console.log("Fetching tweets...");
    const resp = await fetch(
      "https://studio.plasmic.app/api/v1/demodata/tweets"
    );
    return await resp.json();
  });
  if (!data) {
    return null;
  }
  return (
    <DataProvider name="tweets" data={data}>
      {children}
    </DataProvider>
  );
}

If I comment the four lines after "export function" everything is working fine. But with them the console.log("Fetching tweets..."); doesn't appear and instead the error comes up. It seems like the usePlasmicQueryData skips the whole arrow function.

[yang]

Hi, is it possible that the useflags hook depends on some react context being available? That would be my initial suspicion, maybe it is trying to read some react context that is not being provided and thus is null.

You would need to provide the context wherever the extract plasmic query data function is being invoked. What's going on is it is trying to pre-render the react tree here, so you just need to specify a react tree that renders correctly, including any necessary context providers. The default nextjs quick start just renders the plasmic root provider and Plasmic component inside of the pre-rendering phase.

Please let me know if that helps / if that is the issue!

[SabineJakubinek]

Hi!

I think I did everything right in this matter. Maybe you can have a look in my repo here?

[yang]

Hi, that does seem to be the issue.

In the catchall page, the rendering function renders within the wrappers provided by _app.tsx, which has a FlagsmithProvider.

But this is not being provided within getStaticProps during pre-rendering to the extractPlasmicQueryData.

Please let me know if this makes sense!

[SabineJakubinek]

Thank you so much! This did the trick!