Hi folks,
I am getting stuck at invalid hook warning in LabIcon component. In my project jupyterlab and all of the extensions are my dependencies and I am instantiating a new jupyterlab application in my index file. Everything is working except LabIcon component, it’s a class component but using hooks which is anti-pattern for hooks. When i run jupyter lab from conda it works fine but in my own webapp it is complaining about Invalid hooks.
Any suggestions will be great help thanks.
export class LabIcon {
constructor() {
this._initReact();
}
_initReact(displayName) {
const component = React.forwardRef((props = {}, ref) => {
const _a = Object.assign(Object.assign({}, this._props), props), { className, container, label, title, tag = 'div' } = _a, styleProps = __rest(_a, ["className", "container", "label", "title", "tag"]);
// set up component state via useState hook
const [, setId] = React.useState(this._uuid);
// subscribe to svg replacement via useEffect hook
React.useEffect(() => {
const onSvgReplaced = () => {
setId(this._uuid);
};
this._svgReplaced.connect(onSvgReplaced);
// specify cleanup callback as hook return
return () => {
this._svgReplaced.disconnect(onSvgReplaced);
};
});
// make it so that tag can be used as a jsx component
const Tag = tag;
// ensure that svg html is valid
if (!(this.svgInnerHTML && this.svgReactAttrs)) {
// bail if failing silently
return React.createElement(React.Fragment, null);
}
const svgComponent = (React.createElement("svg", Object.assign({}, this.svgReactAttrs, { dangerouslySetInnerHTML: { __html: this.svgInnerHTML }, ref: ref })));
if (container) {
Private.initContainer({ container, className, styleProps, title });
return (React.createElement(React.Fragment, null,
svgComponent,
label));
}
else {
return (React.createElement(Tag, { className: classes(className, LabIconStyle.styleClass(styleProps)) },
svgComponent,
label));
}
});
component.displayName = `LabIcon_${displayName}`;
return component;
}