Error when pre-rendering Simple component.

Issues
#1

Trying to fix one more build error that happens while pre-rendering using SSG:

PLASMIC: Encountered error when pre-rendering Simple: TypeError: Cannot read properties of undefined (reading 'details')

Simple is the name of a code component that’s included in several of my plasmic pages. The component doesn’t have any field called details that I’m aware of.

Any ideas?

#2

It would be really nice if Plasmic had more detailed error messages here. Hard to narrow down where in the code where I might be inadvertently accessing a property of something that’s undefined

#3

I thought maybe the error was happening because my Simple component (also known as NavBar in my code) had a slot leftSide that didn’t have a defaultValue. So I added an empty array for the defaultValue but the error is still happening :confused:

PLASMIC.registerComponent(NavBar, {
  name: 'NavBar',
  props: {
    leftSide: {
      type: 'slot',
      defaultValue: []
    },
    showLink: 'boolean'
  }
});
#4

Hey plasmic team, bumping this thread. Any idea what might be causing this error while pre-rendering my code component?

#5

The error should be thrown by code running in the NavBar function… does NavBar call out to any hooks?

#6

It calls both useEffect and useState… would that cause the error? (code screenshot fyi)

Image from iOS.jpg
Image from iOS.jpg1170×1964 127 KB

#7

@chungwu thoughts?

#8

hmm definitely nothing jumps out from the screenshot; can we take a look at your repo?

#9

sure, i think i already gave access to plasmic ops github.com/ositoai/osito/

#10

appreciate the help

#11

it looks like it’s coming from chakra useBreakpointValue(); you can try wrapping what you’re passing into extractPlasmicQueryData() with the chakra theme provider

image.png
image.png1312×793 97.9 KB

#12

Just for the record this worked great, here’s what the code in my [[…catchall]].tsx file looks like now.

  const queryCache = await extractPlasmicQueryData(
    <ChakraProvider theme={theme}>
      <PlasmicRootProvider loader={PLASMIC} prefetchedData={plasmicData} pageParams={pageMeta.params} skipFonts={true}>
        <PlasmicComponent component={pageMeta.displayName} />
      </PlasmicRootProvider>
    </ChakraProvider>

  );

Thanks @chungwu!