Are there any tips for debugging custom components not showing up in Plasmic Studio? I’ve got my app host setup and working, the URL is configured in my project, and I’ve registered two different components but they don’t show up
Hey, @admirable_wolverine. You can inspect your page and in the console at the root frame check for __PlasmicComponentRegistry. It’s empty for your current page. Are you using loader or codegen?
Weird! I’m using loader I believe?
import { initPlasmicLoader } from "@plasmicapp/loader-nextjs"
import { isDev, plasmic } from "./config"
import { PlasmicPrequal } from "./prequal/components/PlasmicPrequal"
import { FooBar } from "./utils/FooBar"
export const PLASMIC = initPlasmicLoader({
projects: [plasmic],
preview: isDev,
})
PLASMIC.registerComponent(PlasmicPrequal, {
name: "Prequal",
})
PLASMIC.registerComponent(FooBar, {
name: "FooBar",
})
import { PlasmicCanvasHost } from "@plasmicapp/loader-nextjs"
import { PLASMIC } from "~/plasmic"
export default function PlasmicHost() {
return PLASMIC && <PlasmicCanvasHost />
}
Can you show your package.json?
It’s a big file! What should I have in there? Here’s my version
"@plasmicapp/loader-nextjs": "^1.0.343",
I was going to check if there was any other plasmic related package that could have inconsistences. It could happen if you have both loader-nextjs and react-web / host
Only loader-nextjs I’m afraid 
Is it concerning that the API token isn’t getting picked up by my /plasmic-host page? Just says APITOKEN
In the plasmic-init file, I assume
export const PLASMIC = initPlasmicLoader({
projects: [plasmic],
preview: isDev,
})
[plasmic] is a placeholder you changed to not send the token, right?
It’s from a config file
export const plasmic = {
id: process.env.PLASMIC_PROJECT_ID as string,
token: process.env.PLASMIC_API_TOKEN as string,
}
But this same PLASMIC init object is also used to successfully render my Plasmic components; it’s just the app host bit that seems problematic…
Is this code in a public or private repo? Would you mind sharing with me?
Just jumping in here, but any chance this is because environment variables are not available client Side by default for security?
The plasmic tokens are public tokens and okay to inline, or else I believe there’s a way to prefix the environment variable names to mark them as public
Thanks Yang, that was in fact a problem with my Next.js setup; I prefixed the env vars, but it still doesn’t seem to register my components?
I added some logging to my plasmic init file
And you can see in the console on https://www.canyouunlock.com/plasmic-host that the tokens seem to get passed down properly to the client
But __PlasmicComponentRegistry is still empty (you can see the component registration code above too)
It’s private Icaro but I’d happily give either of you read access on GitHub if you’re willing to take a look!
I really appreciate the help, my designer really likes the Studio UI and I’m looking forward to not having to transfer design files to code anymore 
I can take a look! DMed you my email
The issue was that the component registration was using the wrong function in loader
/**
* Register code components to be used on Plasmic Editor.
*/
registerComponent<T extends React_2.ComponentType<any>>(component: T, meta: CodeComponentMeta<React_2.ComponentProps<T>>): void;
/**
* [[deprecated]] Please use `substituteComponent` instead for component
* substitution, or the other `registerComponent` overload to register
* code components to be used on Plasmic Editor.
*
* @see `substituteComponent`
*/
registerComponent<T extends React_2.ComponentType<any>>(component: T, name: ComponentLookupSpec): void;
Instead of the usual registerComponent for code components, it was using the registerComponent for component substitution.