Unlock a world of possibilities! Login now and discover the exclusive benefits awaiting you.
Hi!
This is my index.ts for my Qlik Sense extension which I am trying to build with NebulaJS / React.
I am getting the error Error: Invalid stardust hook call. Hooks can only be called inside a visualization component inside the component().
My index.ts:
/* eslint-disable react-hooks/rules-of-hooks */
import {
useApp, useElement, useEmbed, useInteractionState, useKeyboard,
useModel, useRect, useSelections, useStaleLayout, useTranslator, useTheme
} from "@nebula.js/stardust";
import { useEffect } from "react";
import qae from "./qae";
import useReactRoot from "./hooks/use-react-root";
import { renderFormBuilder } from "./Root";
import { ExtendedLayout, Galaxy } from "./types";
const ext = (env: Galaxy) => ({
definition: qae,
support: {
snapshot: true,
export: true,
exportData: true,
},
});
export default function supernova(env: Galaxy) {
return {
qae,
ext: ext(env),
component() {
const rootElement = useElement();
const layout = useStaleLayout() as ExtendedLayout;
const app: any = useApp();
const model: any = useModel();
const interactions = useInteractionState();
const translator = useTranslator();
const selections = useSelections();
const keyboard = useKeyboard();
const rect = useRect();
const embed = useEmbed();
const theme = useTheme();
const reactRoot = useReactRoot(rootElement);
useEffect(() => {
renderFormBuilder({
reactRoot,
rootElement,
layout,
app,
model,
interactions,
translator,
selections,
keyboard,
rect,
embed,
theme,
});
}, [
reactRoot, rootElement, layout, app, model, interactions,
translator, selections, keyboard, rect, embed, theme
]);
return null;
},
};
}Anyone has any idea what I am doing wrong? Been bashing my head over this for a while. 😉
Tks a bunch!