Issue with useRef hook in nebula.js 5.15.0

cristian_dalsanto — Mon, 09 Jun 2025 15:00:32 GMT

Hi all,

I'm currently developing an extension using Nebula.js version 5.15.0.

According to the documentation https://qlik.dev/apis/javascript/nebula-js/#entries-useref, there's a useRef() hook available from @nebula.js/stardust. However, when I try to use it in my component, I get the following error:

Am I missing something here? Is there a different way to store mutable state across renders in Nebula.js?

For reference, here’s a snippet from my index.js:

import { useElement, useLayout, useEffect, useApp, useSelections, useRef } from '@nebula.js/stardust'; import properties from './object-properties'; import data from './data'; import ext from './ext'; import { Utils } from './lib/utils'; import { Logger } from './lib/logger'; import { qlikHelper } from './lib/qlikHelper'; import { render, teardown } from './components/root'; /** * Entrypoint for your sense visualization * @param {object} galaxy Contains global settings from the environment. * Useful for cases when stardust hooks are unavailable (ie: outside the component function) * @param {object} galaxy.anything Extra environment dependent options * @param {object=} galaxy.anything.sense Optional object only present within Sense, * see: https://qlik.dev/extend/build-extension/in-qlik-sense */ export default function supernova(galaxy) { return { qae: { properties, data, }, ext: ext(galaxy), component() { const utils = useRef(null); const logger = useRef(null); const isDev = useRef(false); const qlikApp = useRef(null); const el = useElement(); const layout = useLayout(); const app = useApp(); const currSel = useSelections(); useEffect(() => { console.info('****** INITIAL FUNCTION *************************'); utils.current = new Utils(); isDev.current = utils.current.isDev(); logger.current = new Logger(isDev.current); logger.current.log('isDev', isDev.current); qlikApp.current = new qlikHelper(app, layout, isDev.current, logger.current); return () => { console.log('unmounted extension'); } }, []); useEffect(() => { // some code... const root = render(el, { layout }, { app: qlikApp.current }, { data: data }, { utils: utils.current }, { logger: logger.current }, { isDev: isDev.current }); return () => { teardown(root); }; }, [layout]); }, }; }

Any help or clarification would be greatly appreciated!

Thanks in advance,
Cristian

topic Issue with useRef hook in nebula.js 5.15.0 in Integration, Extension & APIs

Issue with useRef hook in nebula.js 5.15.0