You must use PlasmicRootProvider at the root of your app

Developer Support
1

Hi I’ve moved my <PlasmicRootProvider> up to _app.tsx as suggested here under “Using Plasmic Components in _app”, everything is working fine, however I’m getting this error in terminal over and over:
Plasmic: Encountered error while prepass rendering: Error: You must use <PlasmicRootProvider/> at the root of your app

2

Hey @efficient_pelican! You need to make sure you still have the <PlasmicRootProvider> in the extractPlasmicQueryData function

3 
// Cache the necessary data fetched for the page
  const queryCache = await extractPlasmicQueryData(
    <PlasmicRootProvider loader={PLASMIC} prefetchedData={plasmicData}>
      <PlasmicComponent component={plasmicData.entryCompMetas[0].displayName} />
    </PlasmicRootProvider>
  );
4

oh! good to know. double providers :rainbow: :rainbow:

1 Like
5

This provider is used to fetch all the data needed for your page on the server-side.
https://docs.plasmic.app/learn/data-code-components/ Let me know if this helps.

6

Still strugulling with it,

example doesn’t look like its for [[…catch.all]], especially for the second part.

image
image915×852 92.2 KB

What code I should put in [[…catchall]].tsx?

import { useRouter } from 'next/router';
import { PageParamsProvider } from '@plasmicapp/loader-nextjs';
import { PLASMIC } from '../plasmic-init';

export function getStaticProps() {
  // Be sure to also fetch data for `NavHeader`
  const plasmicData = await PLASMIC.fetchComponentData('SomePage', 'NavHeader');
  return {
    props: {
      plasmicData
    }
  };
}

export default function SomePage() {
  const router = useRouter();
  // no need for <PlasmicRootProvider />
  return (
    <PageParamsProvider route={router.pathname} params={router.query} query={router.query}>
      <PlasmicComponent component="SomePage" />
    </PageParamsProvider>
  );
}

this example seems to be designed for individual page rather then catchall?