Image not displaying correctly.

Issues
1

Can someone help me resolve this issue:

image.png
image.png1616×286 34.6 KB

2

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

image.png
image.png1024×1062 49.7 KB

3

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

4

Is this a code component?

5

yes

6

And are you using codegen?

7

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

8

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

9

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

image.png

10

But importName is harder to locate as uses:

...getComponentNameAndImportMeta("Button"),
11

Which is imported from utils.ts:

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

export const getPlasmicComponentName = (componentName: string) =>
  `chakra-ui-${componentName}`;

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
    ? { parentComponentName: getPlasmicComponentName(parentComponentName) }
    : {}),
});
12

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

image.png
image.png1368×546 21.8 KB

13

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?

image.png
image.png910×470 20.4 KB

14

FIXED!
I was missing GlobalContextsProvider in pages/index.tsx