Issue with useRef hook in nebula.js 5.15.0

[cristian_dalsanto]

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