The Code Component got rendered as blank div

[jack_vo]

Hi, I am creating a Code Component and have sync it back to Plasmic.
I was see my Code Component reflected correctly inside the app which was great!
To test it out, I have put it into a dummy page.
However, when I tried to load it in my NextJS project

import React, { useState } from 'react';
import { PlasmicComponent } from '@plasmicapp/loader-react';

export default function Authentication() {
    return (
        <PlasmicComponent
            component="TestComponentsPage"
        />
    )
}

I can only see other project components like Text, Button but not the Code Component.
My sync host is http://localhost:3000/plasmic-host
I have attached the screenshot below

Can you please advise? Thanks

[yang]

Hello! Is it possible that the page is not importing the plasmic init file where your registrations are being called? You just need to make sure that those registrations are actually being executed as part of the rendering of that page.

[jack_vo]

Thanks for the reply, that’s interesting, I followed the example and call the PLASMIC.registerComponent( underneath export default but it looks like I need it to be in the default plasmic-init of the app.
Thanks for the explanation, maybe we should include this information in the doc so other developers can be aware.
Thanks

[yang]

Good to know! Absolutely possible we need to patch up the docs here, but just to clarify, where these instructions you were using? https://docs.plasmic.app/learn/nextjs-quickstart/#step-3

[jack_vo]

Hi @yang , thank you for your very quick reply.
I followed the example from here https://docs.plasmic.app/learn/registering-code-components/#example-component-registrations

import { Slider } from 'antd';

// A slider with default styles
registerComponent(Slider, {
  name: 'Slider',
  props: {
    disabled: 'boolean',
    vertical: 'boolean'
  },
  defaultStyles: {
    width: '100%',
    maxWidth: '180px'
  }
});

which made me think that it’s ok to just call register right after your component.

Maybe we should make it clearer by adding a comment to say // registerComponent should happen in the plasmic-init or plasmic-host

Thanks