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

catalin — Thu, 17 Apr 2025 08:17:30 GMT

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!

topic Error: Invalid stardust hook call. Hooks can only be called inside a visualization component. in Integration, Extension & APIs

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