_app layout component getting rendered in Plasmic Studio UI

Developer Support
1

Having a very strange issue with a Plasmic component being loaded into _app as a layout component. The component is being rendered in Plasmic studio UI :thinking_face:

image.png
image.png1909×970 181 KB

image.png

2

import { PlasmicComponent, PlasmicRootProvider } from '@plasmicapp/loader-nextjs';
import { PLASMIC } from '../plasmic-init';
import '../styles/global.css';

function MyApp({ Component, pageProps }: any) {
return (
<PlasmicRootProvider loader={PLASMIC} >
<PlasmicComponent component="Header" />
<div>
<Component {...pageProps} />
</div>
<footer></footer>
</PlasmicRootProvider>
);
}

export default MyApp;

3

image.png
image.png1968×1027 284 KB

4

You’ll need to exempt rendering the layout component for the /plasmic-host page. You can do it a few different ways; I think this would work:

// plasmic-host.tsx
export default function PlasmicHost() {

}
PlasmicHost.isPlasmicHost = true;

// _app.ts
function MyApp({Component, pageProps}) {
  if (Component.isPlasmicHost) {
    return <Component {...pageProps} />;
  } else {
    // ...
   }
}
5

Thanks this works :tada: Is possible to target more specific?

Could we show the header component in Plasmic host, but only in the page views?

6

Hmm no not really… And we don’t really support having the host page render anything but PlasmicCanvasHost at the moment; weird things may happen :stuck_out_tongue:

7

haha well until you support plugins :wink: