[BUG] Nextjs 13 Custom Components

[danbrown7]

Environment

Please provide as many details as you can:

• Hosting type
  • Form.io
  • Local deployment
    • Version:
• Formio.js version: ^4.14.12
• Frontend framework: Next.js 13
• Browser: Chrome

Steps to Reproduce

1. Attempt to create a custom component with Nextjs is riddled with issues

Expected behavior

Creating a custom component as per the examples would allow me to replace components in my forms with a component I create.

Observed behavior

Numerous errors occur when trying to get the custom component working and I cannot find any workaround.

Example

If possible, please provide a screenshot, live example (via JSFiddle or similar), and/or example code to help demonstrate the issue.

For code or form JSON, please enclose in a code block:

Here is my current attempted workaround:

Button.js

export function Button () {
    return <p>test</p>
}

snippet from Index.js

import { useEffect } from 'react'
import dynamic from "next/dynamic";

const Components = dynamic(() => import("@formio/react").then((mod) => mod.Components), {
   ssr: false
 });


export default function Index({ preview, homePage }) {
  useEffect(() => {
    import("@formio/react")
    .then((c) => { 
      Button.component = c.Components.components.button.component;
      Button.Validator = c.Components.components.button.Validator;
      Button.builderInfo = c.Components.components.button.builderInfo;
      Button.schema = c.Components.components.button.schema;
      c.Components.setComponent("button", Button); 
      console.log(c.Components.components)
    })
  })

I attempted to manually attach a bunch of the formio properties after the library is loaded on client side, but I keep getting an error "cannot read property of undefined 'key'"

I can confirm from the console log that my component is successfully added to the list of Formio components, I just don't know what properties I am missing to make this work with the renderer.

Any assistance would be much appreciated.

[Dalorzo]

I think component the Component you need to add needs to be a of an specific type, not any react component c.Components.setComponent("button", Button); . Since your component is missing serveral properties and methods for a proper rendering that is why you are getting this error