Dynamic components not generating correctly.

Issues
1

Hi team, I’ve been having some trouble dynamically generating components via data query. Specifically, I run into:

Warning: Did not expect server HTML to contain a <section> in <div>.

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.

Uncaught Error: There was an error while hydrating this Suspense boundary. Switched to client rendering.

Warning: Cannot update a component (PlasmicNewPage) while rendering a different component (PlasmicNewPage).

Upon just using an array fetched from data query as an input for Repeat Element. I made a fresh test project with a single card component to demonstrate:

2

sounds like a hydration error… could you point me to your project ID?

3

Hi @chungwu, the project ID is 5cEqMuD6b7bhDJcdGfVsbS

4

There are a few issues here we are still looking into, but first you should try to “extract” the query data your page uses at build time. You can do so like:

// new-page.tsx

import { extractPlasmicQueryData } from "@plasmicapp/react-web/lib/prepass";
import { PlasmicQueryDataProvider } from "@plasmicapp/react-web/lib/query";

export const getStaticProps: GetStaticProps = async ({params}) => {
  const queryData = await extractPlasmicQueryData(
    <ph.PageParamsProvider
      params={params}
      query={params}
    >
      <PlasmicNewPage />
    </ph.PageParamsProvider>
  );

  console.log("DATA", queryData);

  return { 
    props: {
      queryData
    }
  };
}

export default function NewPage({queryData}: any) {
  return (
    <PlasmicQueryDataProvider prefetchedCache={queryData}>
      <ph.PageParamsProvider
        params={useRouter()?.query}
        query={useRouter()?.query}
      >
        <PlasmicNewPage />
      </ph.PageParamsProvider>
    </PlasmicQueryDataProvider>
  );
}

This would also incidentally avoid the hydration error you saw (which we are still investigating)

5

Thanks @chungwu! I’ll give it a try, and do not hesitate to let me know if there’s anything I can do to help assist / test things on my end for your team.