Image not displaying correctly.

Can someone help me resolve this issue:

I can register this button and it appears in the studio:

I’m deploying to Vercel, then get the build fail error above.

Is this a code component?


And are you using codegen?

I think you’re missing the correct importName and importPath property when registering it.

YEs codegen. Put I set the project up from Plasmic Studio publish screen, rather than CLI

Changes to :
importPath: “./components/base/button/button” and see:


But importName is harder to locate as uses:


Which is imported from utils.ts:

export const CHAKRA_UI_IMPORT_PATH = "@chakra-ui/react";

export const getPlasmicComponentName = (componentName: string) =>

export const getDisplayComponentName = (componentName: string) =>
  `Chakra-UI ${componentName}`;

export const getComponentNameAndImportMeta = (
  componentName: string,
  parentComponentName?: string,
  opts?: {
    displayName?: string;
    importPath?: string;
) => ({
  name: getPlasmicComponentName(componentName),
  displayName: opts?.displayName ?? getDisplayComponentName(componentName),
  importPath: opts?.importPath ?? CHAKRA_UI_IMPORT_PATH,
  importName: componentName,
    ? { parentComponentName: getPlasmicComponentName(parentComponentName) }
    : {}),

OK it worked (kinda). I now see it but without styles applied:

Another issue that seems to be happening is that “Call webhooks” happens beforePush to GitHub is complete.
so I have to publish twice. Is this normal?

I was missing GlobalContextsProvider in pages/index.tsx