Component not showing up in design

:wave: hey, running into an issue using data fetching components in the headless API mode, I have a component that uses the swr hook to fetch some data from a cms api, this component has no props, as it’s just a test to display some data. I proceed to register this component inside of the plasmic-init.ts file like so

PLASMIC.registerComponent(ProductComponent, {
  name: "productComponent",

But this component does not show up inside of my component dropdown menu, if I add any props to it It shows up but the application crashes when I try to drag and drop it inside of a page.

– component code

import useGetProducts from "../hooks/useGetProducts";
import { Product } from "../types.ds";

export default function ProductComponent() {
  const { products, isLoading, isError } = useGetProducts();

  if (isLoading) return <div>Fetching data...</div>;
  if (isError) return <div>Something went wrong..</div>;

  return (
      {products?.map((product: Product) => {
        <div key={}>
          <small>id: {}</small>
          <h1>title : {}</h1>;
          <p>description : {product.description}</p>;
          <p>price: {product.price}</p>

– fetch hook

import { fetcher } from "../libs/fetcher";
import useSWR from "swr";
import { Product } from "../types.ds";

export default function useGetProducts() {
  const { data, error } = useSWR<Product[]>(
    "cms api endpoint",
      refreshInterval: 1000,

  return {
    products: data,
    isLoading: !error && !data,
    isError: error,


Thanks for your report! We are currently investigating this.

Hey, we just fixed this issue and this might just be the same thing. Can you try to add it again?

For the registration, to register a code component you must pass the props parameter, or it’ll try to instead do a component substitution (this is to maintain backwards compatibility)