Plasmic host not registering component and not displaying page properly

[aihe_team]

I am working on Asim’s Whatsapp tutorial video and wanted to do the loader side by side in the Plasmic Studio.

For the loader version, I started with the supabase nextjs quickstart. Use Supabase with Next.js | Supabase Docs

I created a new Plasmic project following the Plasmic documentation on Getting started with Next.js.

I imported the CodeGen project to the newly created project so I could use the components I already created in the CodeGen.

The problem is that components on the page aren’t positioned properly. Please see the image.

What shows on the localhost, doesn’t show in Plasmic studio.

Also getting this error

What have you tried so far? (please link relevant docs and other forum posts)
I tried this: Get started with Next.js | Learn Plasmic

Edit: Noticed that the issue starts when I try to configure custom host app by adding localhost:3001/plasmic-host/. (I am on 3001 not 3000) It goes away once I remove the custom app host.

Relevant links:

• My project: Plasmic

[fmota]

Hi, this is happening because the template created by create-next-app contains:

<main className="min-h-screen flex flex-col items-center">

in RootLayout.tsx, you can have remove min-h-screen or disable the layout for the PlasmicHost page, this should fix the issue of your canvas elements not positioned properly.

About the code components, could you double check your implementation/registration? The file where registerComponent should be called is different in the app dir setup.