build error on plasmic register component

Issues
1

I’ve been trying to deploy my application, which runs smoothly in development, but I’m unable to successfully build it for production.

component register:

PLASMIC.registerComponent(OtpVerification, {
  name: "OtpVerification",
  props: {
    externalPhoneNumber: {
      type: "string",
      defaultValue: "",
    },
    userEmail: {
      type: "string",
      defaultValue: "user@example.com",
    },
    userId: {
      type: "string",
      defaultValue: "123",
    },
    onPhoneNumberChange: {
      type: "eventHandler",
      argTypes: [{ name: "phoneNumber", type: "string" }],
    },
    onVerified: {
      type: "eventHandler",
      argTypes: [],
    },
    oncheckUser: {
      type: "eventHandler",
      argTypes: [{ name: "phoneNumber", type: "string" }],
    },
    isOpen: {
      type: "boolean",
      defaultValue: false,
    },
    onOpenChange: {
      type: "eventHandler",
      argTypes: [{ name: "isOpen", type: "boolean" }],
    },
    existingUser: {
      type: "boolean",
      defaultValue: false,
    },
  },
  states: {
    phoneNumber: {
      type: "writable",
      valueProp: "externalPhoneNumber",
      onChangeProp: "onPhoneNumberChange",
    },
    open: {
      type: "writable",
      valueProp: "isOpen",
      onChangeProp: "onOpenChange",
    },
    existingUser: {
      type: "writable",
      valueProp: "existingUser",
      onChangeProp: "oncheckUser",
    },
  },
  importPath: "./components/OtpVerification",
  importName: "OtpVerification",
});

error on build:

image
image1649×479 51.7 KB

how to resolve this error

2

Hello @paritosh_chhibber,

Can you send the entire error message please?
Also, can you confirm which plasmic packages and version you have imported in your package.json?

3

sure
package.json

 "dependencies": {
    "@plasmicapp/loader-nextjs": "^1.0.410",
    "@supabase/ssr": "^0.4.0",
    "next": "14.2.23",
    "plasmic-supabase": "^0.4.1",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.23",
    "supabase": "^2.12.1",
    "typescript": "^5"
  }

error on build

   Linting and checking validity of types ...
./components/OtpVerification.jsx
34:6  Warning: React Hook useEffect has a missing dependency: 'phoneNumber'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps
info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
Failed to compile.
./plasmic-init.ts:61:3
Type error: No overload matches this call.
  Overload 2 of 2, '(component: ({ userEmail, userId, externalPhoneNumber, onPhoneNumberChange, onVerified, isOpen, oncheckUser, existingUser }: { userEmail: any; userId: any; externalPhoneNumber: any; onPhoneNumberChange: any; onVerified: any; isOpen: any; oncheckUser: any; existingUser: any; }) => Element | null, name: ComponentLookupSpec): void', gave the following error.
    Object literal may only specify known properties, and 'props' does not exist in type '{ name: string; projectId?: string | undefined; isCode?: boolean | undefined; }'.
  59 | PLASMIC.registerComponent(OtpVerification, {
  60 |   name: "OtpVerification",
> 61 |   props: {
     |   ^
  62 |     externalPhoneNumber: {
  63 |       type: "string",
  64 |       defaultValue: "",
Static worker exited with code: 1 and signal: null
==> Build failed 😞
==> Common ways to troubleshoot your deploy: https://render.com/docs/troubleshooting-deploys

image
image1824×772 105 KB

4

It seems that your registration is missing a field variableType in the states. Can you try using this registration code?

PLASMIC.registerComponent(OtpVerification, {
  name: "OtpVerification",
  props: {
    externalPhoneNumber: {
      type: "string",
      defaultValue: "",
    },
    userEmail: {
      type: "string",
      defaultValue: "user@example.com",
    },
    userId: {
      type: "string",
      defaultValue: "123",
    },
    onPhoneNumberChange: {
      type: "eventHandler",
      argTypes: [{ name: "phoneNumber", type: "string" }],
    },
    onVerified: {
      type: "eventHandler",
      argTypes: [],
    },
    oncheckUser: {
      type: "eventHandler",
      argTypes: [{ name: "phoneNumber", type: "string" }],
    },
    isOpen: {
      type: "boolean",
      defaultValue: false,
    },
    onOpenChange: {
      type: "eventHandler",
      argTypes: [{ name: "isOpen", type: "boolean" }],
    },
    existingUser: {
      type: "boolean",
      defaultValue: false,
    },
  },
  states: {
    phoneNumber: {
      type: "writable",
      variableType: "text",
      valueProp: "externalPhoneNumber",
      onChangeProp: "onPhoneNumberChange",
    },
    open: {
      type: "writable",
      variableType: "boolean",
      valueProp: "isOpen",
      onChangeProp: "onOpenChange",
    },
    existingUser: {
      type: "writable",
      variableType: "boolean",
      valueProp: "existingUser",
      onChangeProp: "oncheckUser",
    },
  },
});

I’ve also removed importPath and importName as they are not required when using plasmic loader.