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!