What are you trying to do? (please be as specific as possible and include relevant screenshots, code snippets, and reproduction steps)
We imported a Plasmic project and are getting the following error. Is there a way we can fix this error or stop the error from showing.
Relevant links:
Since a single project can only have a single app host, it’s advisable to use the same host for all your projects. It’s also possible to use different hosts, just make sure all the components are imported in the main project’s host. This is to ensure that all code components in the imported project are available to the main project.
Hi @jason!
Nice to meet you! Seen your response posts around the forum and this is the first time we got a response from you! 
We are honored and grateful for the response 
How does one add many plasmic projects to a plasmic init file so we can use the same host for all your projects?
I think I tried something like below once and unless I did something wrong it didn’t work. 
projects: [
{
id: ID of the first project
token: API token of the first project
},
{
id2: ID of the second project
token2: API token of the second project
},
],
Thank you thank you We have a rotating schedule for support on the forum, so that’s probably why 
Just so you know, the init file is not necessary for the code component registration at all.
The main requirement to get code components working with multiple projects is having the /plasmic-host that renders <PlasmicCanvasHost />. Then make sure code component registrations are there for all projects.
The init file is only necessary when you’re rendering the content. So in this case, you have a Style Tokens project and a Main project. If your Style Tokens project doesn’t have its own dedicated website, then the init file would only need the Main project’s ID/token.
@jason assume that you’re using Plasmic to create these programs and you publish them to GitHub straight from Plasmic.
If you have two different projects, then you’ll end up with two different repositories; therefor two different app hosts.
If you want to create a design system and have it be accessible to all of your projects; would this need to happen in the following way …
You have a top level project that has a packages folder with the design system in it. And then you have a projects folder with your projects in it.
And then they’d be on the same app host?
And then on GitHub, you can just choose those folders to save your project in to publish?
I am an experienced Plasmic user and only grasp about 75% of what was said here; is there any way ya’ll can create some documentation/content around this? I have found this generally confusing and think its an area that is lacking in depth explanation.
@jason I have to agree with what @alyssa_feola said! Because I didn’t quite understand. I have a few clarification questions.
plasmic-init.ts?Sorry for the confusion
I was trying to explain that plasmic-init.ts is not relevant here, since that’s only for loading Plasmic content, whereas we’re just trying to register components to Plasmic.
I’ll post a few options here for registering components that hopefully make sense.
This works if you don’t have a dedicated site for your style tokens. You do NOT need the id/token for your style tokens project (though adding it doesn’t hurt, unless you have pages in the style tokens project that you don’t want to expose).
// plasmic-init.ts
const PLASMIC = initPlasmicLoader({
projects: {
id: "main project id",
token: "main project token",
}
});
PLASMIC.registerComponent(SomeComponent, { ... });
PLASMIC.registerToken(SomeToken, { ... });
Maybe you want this if you have a dedicated site for your style tokens. Or maybe you have the style tokens in a separate repo or NPM package.
// style-tokens/register.ts
export function registerStyleTokens(PLASMIC: PlasmicComponentLoader) {
PLASMIC.registerComponent(SomeComponent, { ... });
PLASMIC.registerToken(SomeToken, { ... });
}
// style-tokens/plasmic-init.tsx
import { registerStyleTokens } from "./style-tokens/register";
const PLASMIC = initPlasmicLoader({
projects: {
id: "style token project id",
token: "style token project token",
}
});
registerStyleTokens(PLASMIC);
// main/plasmic-init.tsx
import { registerStyleTokens } from "../style-tokens/register";
import { registerOtherDep } from "../other-dep/register";
const PLASMIC = initPlasmicLoader({
projects: {
id: "main project id",
token: "main project token",
}
});
registerStyleTokens(PLASMIC);
registerOtherDep(PLASMIC); // add more imported projects like this
This is an example of using the single repo approach, correct?
So, say that was the repo that you had your components registered in, and you didn’t want to register every single component in the new project and just take them from there, would it be possible for you to create a new project that demonstrated how you’d leverage the registration that has already been done?
Unless I’m misunderstanding your question, you would just create a Plasmic project (without generating a new repo) and point to the existing repo’s app host.
No, I don’t think you were misunderstanding; that seems logical … I was just having a hard time getting there myself.
I think I was having a hard time rationalizing having a project on Plasmic with an App-Host without it being logically connected to a repo. It felt like that it would somehow be a phantom limb of some sorts.