Embedding with Nebula: Could not find a version of 'barchart' that supports current object version.

[vegard_bakke]

I'm trying to embed a chart from Qlik SaaS, onto a web page, following: https://qlik.dev/tutorials/build-a-simple-web-app


However, as I need to support SAP C4C, Sharepoint and other enterprise legacy web solutions, I cannot rely on creating a standalone NodeJS project. I therefore need to use the script import (as in https://qlik.dev/libraries-and-tools/nebulajs/installation).

The errors I get are:

Could not find a version of 'barchart' that supports current object version. Did you forget to register barchart?

(Same for other types of charts.)

My code is basically as index.html and app.js (from the tutorial in the first link), except:

index.html:

<div id="intro">Loading...</div>
<div id="title">Loading...</div>
<div class="qv1"></div>
<div class="qv2"></div>
<script src="https://unpkg.com/enigma.js@2.7.0/enigma.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@nebula.js/stardust" crossorigin></script>
<script src="app.js"></script>

app.js:

Overriding the tenantUri, webIntegrationId, and appId, and:

    // finally, present the app title in your web app:
    titleElement.innerHTML = 'Opened the app: ' + appLayout.qTitle;
	

    const n = stardust.embed(app);
    n.render({
        element: document.querySelector('.qv1'),
        id: 'HkfjJ',
    });
    n.render({
        element: document.querySelector('.qv2'),
        id: 'KeSle',
    });
  } catch (err) {
    window.console.log('Error while setting up:', err);
  }
})();

Any clues of this?  Anything I'm missing?

Regards,
Vegard 🙂 

[Damien_Villaret]

Hello @vegard_bakke 

I've just discussed this internally and it seems you need to register the chart first.

It's mentioned on this page:

https://qlik.dev/tutorials/build-a-simple-mashup-using-nebulajs

"The core stardust module doesn't contain any visualizations. Each visualization is its own separate module and needs to be loaded and registered before it can be used."

So you could add the line:

<script src="https://cdn.jsdelivr.net/npm/@nebula.js/sn-bar-chart" crossorigin></script>

to your HTML.

Here's the full list of supported charts

https://qlik.dev/libraries-and-tools/visualizations/inventory

and an example using fake data (not from Qlik Engine) but it demonstrates how the chart is loaded with <script> or requireForm
https://codesandbox.io/s/nebula-fake-data-mekko-script-d52qn?file=/index.html