Custom app host is not codegen-ing custom component

Issues
1

*What are you trying to do?

Integrating host and publishing the built app to gitHub

What are the reproduction steps?

Create an host with custom components (localhost:4200/plasmic-host)
Configure custom App host
Connect to gitHub and publish
Clone the project and try to run it, the custom component is not present in gitHub.

Relevant links:

2

Hello @bharath_bhat,
Your custom code components should define a importPath property, that should tell codegen where exactly to find it. Read more about it in the docs: Code components API reference | Learn Plasmic

The path to be used when importing this component in the generated code. It can be the name of the npm package that contains the component (antd ), or the path to the file in the project (relative to the root directory, where the plasmic.json file is located).

3

I have used the importPath in my host as below -

registerComponent(ReAreaChart, {
name: “AreaChartPlasmic”,
importPath: “./components/Reareachart”,
importName: “ReAreaChart”,
description: “A customizable area chart component using Recharts library.”,
displayName: “Area Chart”,
props: {
className: {
type: “class”,
displayName: “Styles”,
},
data: {
type: “object”,
description: “Array of objects with label and value keys”,
defaultValue: [
{ label: “Jan”, value: 1200 },
{ label: “Feb”, value: 980 },
{ label: “Mar”, value: 1100 },
{ label: “Apr”, value: 1300 },
],
},
},
});

This is the component defination-

import {
AreaChart,
Area,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend,
} from “recharts”;

export function ReAreaChart({
data,
className,
}: {
data: any;
className?: string;
}) {
return (



// More area chart code


);
}

image
image1526Ă—760 90.4 KB

After publish this is the cloned repo , as you can see , it builds fine , but during runtime, i.e when i try to access localhost:3000 via browser its throwing this runtime error.

My gitHub repo - https://github.com/bharath3719/fistGraphExport
Plasmic Studio project - Plasmic

4

Looking at your Github repo, ../../Reareachart seems to be a non-existing path.

code component registrations should either be in the same repo as the Plasmic generated code, or it can be an npm package.

5

Its an npm package which i have installed in host. And i am able to drag and drop that chart in the plasmic studio by configuring custom host , So when i publish to gitHub , wont that component also be exported ?

6

No, only the code component meta will be exported. The Plasmic generated code will try to find that component definition using the importPath provided in the code component registratioln.

7

Okay, so in-order to get the published app running locally i need to clone it , add npmrc file , and then run , so at run time it picks up the components from the npm registry ?

8

Pls confirm me on this ,

I have localhost:3000/plasmic-host lets call this repo plasmic-host-repo, here i am defining some custom components which i am able to drag and drop into the studio.

Following the codegen approach-> connect to gitHub-> publish , i need to publish it to plasmic-host-repo for the custom code components to be referenced properly?

9

Yes, if its a relative path (as opposed to an npm package), then you have to ensure the code components exist in the same repository as the code generated for the project. You can use the Push to Github action, or you can also use the Plasmic CLI.

1 Like