[BUG] 'AppInsightsErrorBoundary' cannot be used as a JSX component.

[kkazala]

Description/Screenshot

I have a SPFx 1.16 solution: https://github.com/kkazala/codespaceSPFx created using yo @microsoft/sharepoint
I want to add ErrorBoundary as described here: https://learn.microsoft.com/en-us/azure/azure-monitor/app/javascript-react-plugin#react-error-boundaries

I'm getting the following error:

'AppInsightsErrorBoundary' cannot be used as a JSX component.
  Its instance type 'AppInsightsErrorBoundary' is not a valid JSX element.
    Type 'AppInsightsErrorBoundary' is missing the following properties from type 'ElementClass': context, setState, forceUpdate, props, refs

I understand it may be related to the react version, but SPFx requires React v17.0.1 SPFx development environment compatibility

Steps to Reproduce
Repo contains codespace configuration files, please simply create a new codepsace from the repo

• OS/Browser:
• React Version: 17.0.1
• SDK Version [e.g. 22]: 3.4.0
• How you initialized the SDK:

Expected behavior
I would expect no errors =)

Additional context
I am aware I didn't instantiate ApplicationInsights ;) This is just an example presenting the issue with AppInsightsErrorBoundary.

[kkazala]

Adding constructor:

export default class AppInsightsErrorBoundary extends React.Component<IAppInsightsErrorBoundaryProps, IAppInsightsErrorBoundaryState> {
    constructor(props: IAppInsightsErrorBoundaryProps | Readonly<IAppInsightsErrorBoundaryProps>) {
        super(props);
        this.state = { hasError: false };
    }
   [...]

would solve the issue. Could you look into it?

[Karlie-777]

@kkazala Thanks for suggested solutions! do you mind trying adding "allowSyntheticDefaultImports": true, to your tsconfig.json? (I didn't find this config in your project, correct me if I am wrong) since React didn't export default and this may lead to complier errors as well

[kkazala]

@Karlie-777 Awesome, it's all working now 😊
thank you for your help!

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.