Unable to see registered card component in Plasmic

I’m trying to register components and sub components in a Card. But don’t see anything in Plasmic. Does this code look correct?

 registerComponent(Card, {
    name: 'Card',
    importPath: './styles/Card',
    props: {
      children: {
          type: "slot",
          defaultValue: {
            type: "component",
            name: "CardContent",
          },
        },
      }
    }
  )

  registerComponent(CardContent, {
    name: 'CardContent',
    importPath: './styles/CardContent',
    parentComponentName: "Card",
    props: {
      imageSrc: 'string',
      children: {
        type: "slot",
        defaultValue: {
          type: "component",
          name: "CardSubContent",
        },
      },
    }
    }
  )

  registerComponent(CardSubContent, {
    name: 'CardSubContent',
    importPath: './styles/CardSubContent',
    parentComponentName: "CardContent",
    props: {
      title: 'string',
      description: 'string',
      ButtonText: 'string',
    }
    }
  )

looks right; make sure this file is run when plasmic-host page is rendered (so is in the import path from your plasmic-host.tsx page)

plasmic-host.tsx

import CardFunLabTwo from "../styles/CardFunLabTwo";
import CardFunLabTwoContent from "../styles/CardFunLabTwoContent";
import CardFunLabTwoSubContent from "../styles/CardFunLabTwoSubContent";

This is what I see in Plasmic

image.png

Note the components names aren’t the same as I removed them on the code posted above.

The components being imported are:

CardFunLabTwo.tsx

import * as React from 'react'
import {Box, Container} from '@chakra-ui/react'

export default function CardFunLabTwo({Children, className}) {  
  return (    
    <div className={className} >
      <Box padding="0px"margin="0px">
        <Container padding="0px">
          <Box bg="#F05933" borderRadius="32px" overflow='hidden'>
            {Children}
          </Box>
        </Container>
      </Box>
    </div>
  );
}

CardFunLabTwoContent.tsx

import * as React from 'react'
import {Stack,Image} from '@chakra-ui/react'

export default function CardFunLabTwoContent({Children, className, imageSrc }) {
  //@ts-ignore
  CardFunLabTwoContent.defaultProps = {
    imageSrc: "Image.png"
  }
  return (    
    <div className={className} >
      <Image alt="image" width="100%" height="192px" src={imageSrc}/>
      <Stack spacing="6" p={{ base: '1', md: '6' }}>
        {Children}
      </Stack>
    </div>
  );
}

CardFunLabTwoSubContent.tsx

import * as React from 'react'
import {Button, Text} from '@chakra-ui/react'

export default function CardFunLabTwoSubContent({Children, title, description, ButtonText }) {

  //@ts-ignore
  CardFunLabTwoSubContent.defaultProps = {
    title: "We do Parties and Functions",
    description: "Get ready for the craziest round of mini golf you've ever played! Wind your way through a tantalising labyrinth inspired by your everyday everythings with a generous slathering of nostalgia.",
    ButtonText: "Book online",
  }
  return (    
    <div>
      {Children}
      <Text fontFamily="SignPainter HouseSlant" fontSize="50px" fontWeight="medium" color="white" lineHeight="90%">
        {title}
      </Text>
      <Text color="white" fontFamily="Albert Sans" fontSize="14px" lineHeight="140%">
        {description}
      </Text>
      <Button width="136px" fontFamily="SignPainter HouseSlant" fontSize="20px" variant="primary">
        {ButtonText}
      </Button>
    </div>
  );
}

@chungwu Any more help on this one?

All fixed.