Keep getting errors when my website is deployed on Vercel with codegen

Developer Support
1

keep getting errors when my website is deployed on vercel after adding a new component, all it is is an image that moves when you hover on it and links to another page and im pretty much lost

[21:11:09.043] Running build in San Francisco, USA (West) – sfo1
[21:11:09.088] Cloning [github.com/disukomusic/disuko-website-2](http://github.com/disukomusic/disuko-website-2) (Branch: main, Commit: b642b87)
[21:11:16.151] Cloning completed: 7.063s
[21:11:16.293] Restored build cache
[21:11:16.323] Running "vercel build"
[21:11:16.881] Vercel CLI 28.16.15
[21:11:17.257] Installing dependencies...
[21:11:19.287]
[21:11:19.287] up to date in 2s
[21:11:19.288]
[21:11:19.288] 126 packages are looking for funding
[21:11:19.288]   run `npm fund` for details
[21:11:19.300] Detected Next.js version: 13.1.1
[21:11:19.307] Detected `package-lock.json` generated by npm 7+...
[21:11:19.307] Running "npm run build"
[21:11:19.706]
[21:11:19.706] > tmp-cpa@0.1.0 build
[21:11:19.706] > next build
[21:11:19.706]
[21:11:20.404] info  - Linting and checking validity of types...
[21:11:27.947] Failed to compile.
[21:11:27.947]
[21:11:27.947] ./components/Diko.tsx:41:31
[21:11:27.948] Type error: Type 'Ref<HTMLImageElement> | undefined' is not assignable to type 'LegacyRef<HTMLAnchorElement> | undefined'.
[21:11:27.948]   Type '(instance: HTMLImageElement | null) => void' is not assignable to type 'LegacyRef<HTMLAnchorElement> | undefined'.
[21:11:27.948]     Type '(instance: HTMLImageElement | null) => void' is not assignable to type '(instance: HTMLAnchorElement | null) => void'.
[21:11:27.948]       Types of parameters 'instance' and 'instance' are incompatible.
[21:11:27.948]         Type 'HTMLAnchorElement | null' is not assignable to type 'HTMLImageElement | null'.
[21:11:27.949]           Type 'HTMLAnchorElement' is missing the following properties from type 'HTMLImageElement': align, alt, border, complete, and 20 more.
[21:11:27.949]
[21:11:27.949] [0m [90m 39 | [39m  [90m// to do whatever works for you.[39m[0m
[21:11:27.949] [0m [90m 40 | [39m[0m
[21:11:27.949] [0m[31m[1m>[22m[39m[90m 41 | [39m  [36mreturn[39m [33m<[39m[33mPlasmicDiko[39m root[33m=[39m{{ ref }} {[33m...[39mprops} [33m/[39m[33m>[39m[33m;[39m[0m
[21:11:27.949] [0m [90m    | [39m                              [31m[1m^[22m[39m[0m
[21:11:27.949] [0m [90m 42 | [39m}[0m
[21:11:27.949] [0m [90m 43 | [39m[0m
[21:11:27.950] [0m [90m 44 | [39m[36mconst[39m [33mDiko[39m [33m=[39m [33mReact[39m[33m.[39mforwardRef([33mDiko_[39m)[33m;[39m[0m
[21:11:28.008] Error: Command "npm run build" exited with 1
[21:11:28.333] BUILD_FAILED: Command "npm run build" exited with 1
2

what’s in Diko.tsx?

3 
// This is a skeleton starter React component generated by Plasmic.
// This file is owned by you, feel free to edit as you see fit.
import * as React from "react";
import {
  PlasmicDiko,
  DefaultDikoProps
} from "./plasmic/disuko_website_v_2/PlasmicDiko";
import { HTMLElementRefOf } from "@plasmicapp/react-web";

// Your component props start with props for variants and slots you defined
// in Plasmic, but you can add more here, like event handlers that you can
// attach to named nodes in your component.
//
// If you don't want to expose certain variants or slots as a prop, you can use
// Omit to hide them:
//
// interface DikoProps extends Omit<DefaultDikoProps, "hideProps1"|"hideProp2"> {
//   // etc.
// }
//
// You can also stop extending from DefaultDikoProps altogether and have
// total control over the props for your component.
export interface DikoProps extends DefaultDikoProps {}

function Diko_(props: DikoProps, ref: HTMLElementRefOf<"img">) {
  // Use PlasmicDiko to render this component as it was
  // designed in Plasmic, by activating the appropriate variants,
  // attaching the appropriate event handlers, etc.  You
  // can also install whatever React hooks you need here to manage state or
  // fetch data.
  //
  // Props you can pass into PlasmicDiko are:
  // 1. Variants you want to activate,
  // 2. Contents for slots you want to fill,
  // 3. Overrides for any named node in the component to attach behavior and data,
  // 4. Props to set on the root node.
  //
  // By default, we are just piping all DikoProps here, but feel free
  // to do whatever works for you.

  return <PlasmicDiko root={{ ref }} {...props} />;
}

const Diko = React.forwardRef(Diko_);
export default Diko;
4

i just built it in the editor, i didn’t change the code at all

5

oh! I suppose Diko used to have an element that is img type, but is now anchor type? you’ll just need to edit Diko.tsx to make it HTMLElementRefOf<"a"> instead (you own Diko.tsx and we don’t update it after the first sync)

6

got it, thanks