Unable to get functional components to work with my Next.js app

Issues
21

and what version of @plasmicapp/loader-nextjs?

22 
"@plasmicapp/loader-nextjs": "^1.0.107",
23

what does your http://localhost:3000/plasmic-host look like?

24

you can see a version here: https://staging.rampedcareers.com/plasmic-host

25

oh great; what’s your project ID?

26 
"5rZNQCcEeqnxNxXq7nEieD"
27

could you show me your _app.js?

28

hmm looks like this is the culprit:

image.png

29

do you know where that style is from?

30

I can look, where are you seeing that?

31

looks like a global css style… it is on every page

32

I can look into removing it, what should it be/why is it causing an issue here?

33

it normally doesn’t have any styles out of the box for a nextjs app, so you may have a global css style setting those styles, maybe imported from your _app.js? Because the artboard is being rendered just after this __next div, and the __next div is 100% height, the artboard content is actually pushed down to just below where the artboard ends…

34

I see, I think I’ve found it, is there a way I can solve this without changing these styles globally/

35

Could you try adding this to your plasmic-host.tsx?

<style global jsx>{`
        #__next {
          height: unset;
        }
      `}</style>
36

Commenting it out globally fixed the display issue!

37

I renamed it to plasmic-host.js but I will try that

38

Great, thank you Chung! That appears to have fixed the style issue. So I’m able to see the stuff in the editor properly. However, I’m still not able to import functional components.

39

right now I don’t see any code components registered…

40

I just uncommented them