Error: Rendered more hooks than during the previous render.

[engineerwr]

Hello gentlemen, I have a problem that I cannot solve. it comes that whenever I add a second widget with usestate. it returns me: Unhandled Runtime Error Error: Rendered more hooks than during the previous render.

Does anyone have an idea how to get around this? Stay safe and have a 2024 full of many achievements

[LeoMld]

Hi, I also faced a similar problem, which I eventually linked to how I named my configuration file. At first, I named it config.ts, not realizing it should have been config.tsx. To get around the compilation error, I modified my approach, shifting from JSX syntax to a plain function invocation:

Originally, I had (config.ts):

{
  widgetName: 'default',
  widgetFunc: (props: any) => <DefaultWidget {...props} />,
}

But to avoid the error, I changed it to (config.ts):

{
  widgetName: 'default',
  widgetFunc: (props: any) => DefaultWidget(props),
}

This workaround led to another issue: "Rendered more hooks than during the previous render," which occurred after implementing useState within my widget. To resolve such problems, the correct approach is indeed to name your file config.tsx and use the JSX syntax as follows:

{
  widgetName: 'default',
  widgetFunc: (props: any) => <DefaultWidget {...props} />,
}