Do not input private or sensitive data. View Qlik Privacy & Cookie Policy.
Skip to main content

Announcements
Want to see what's currently in public preview? We've pulled it all together in one place. Check it out here
cancel
Showing results for 
Search instead for 
Did you mean: 
catalin
Partner - Contributor III
Partner - Contributor III

Error: Invalid stardust hook call. Hooks can only be called inside a visualization component.

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!

Labels (5)
0 Replies