React Hooks Error

If you are seeing the error below when creating custom components in WebViewer, it is probably due to the fact that you are using React Hooks in your component, or using a library that uses React Hooks.

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

To fix this error, refactor your component to be a class based component rather than a functional component.

Here is an example of a functional component that uses React Hooks:

const CustomButton = () => {
    useEffect(() => {
        console.log('test');
    }, []);

    return <button>Click me!</button>;
}

const newCustomElement = {
    type: 'customElement',
    dataElement: 'customElementButton',
    render: () => <CustomButton />
};

instance.UI.setHeaderItems(header => {
    header.push(newCustomElement);
});

Here is an example of a class based component that does the same thing:

class CustomButton extends React.Component {
    componentDidMount() {
        console.log('test');
    }

    render() {
        return <button>Click me!</button>;
    }
}

const newCustomElement = {
    type: 'customElement',
    dataElement: 'customElementButton',
    render: () => <CustomButton />,
};

instance.UI.setHeaderItems(header => {
    header.push(newCustomElement);
});

In WebViewer we use a different instance of React than the one you are using in your app. For hooks to work, the React instance where the hook was declared and where it was rendered must be the same. This is a limitation of React mentioned here: https://react.dev/warnings/invalid-hook-call-warning#duplicate-react