Learn how to successfully import JavaScript libraries that have dependencies on each other in Qlik

I am currently in the process of developing a customized extension and I need to use Chart.js for this project.

The necessary imports are as follows:

define( [
        'jquery',
        './PropertiesPannel',
        '//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js',
        '//cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js',
        '//cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="086b60697a7c627b2578647d6f61df33657c"><span class="__cf_email__" data-cfemail="65e1ededfc">[email protected]</span></a>/dist/chartjs-plugin-zoom.min.js'
    ],
    function ( $, ProperitesPannel, Chart) {
        'use strict';
....

An error message is showing up in the Console:

hammerjs.js:1 Uncaught SyntaxError: Unexpected token '<'
3setup-view.d91ae8b7669a979d2ec1.js:8 TypeError: Cannot read property 'helpers' of undefined
    at chartjs-plugin-zoom.min.js:11
    at Object.execCb (setup-view.d91ae8b7669a979d2ec1.js:8)
    at n.check (setup-view.d91ae8b7669a979d2ec1.js:8)
    at n.<anonymous> (setup-view.d91ae8b7669a979d2ec1.js:8)
    at setup-view.d91ae8b7669a979d2ec1.js:8
    at setup-view.d91ae8b7669a979d2ec1.js:8
    at each (setup-view.d91ae8b7669a979d2ec1.js:8)
    at n.emit (setup-view.d91ae8b7669a979d2ec1.js:8)
    at n.check (setup-view.d91ae8b7669a979d2ec1.js:8)
    at n.enable (setup-view.d91ae8b7669a979d2ec1.js:8)

I understand that the chartjs Plugin file needs to be linked with the chart file and hammer. How can I make sure these dependencies are properly connected?

javascriptrequirejsqlikviewqliksense

Answer №1

This particular issue can be quite tricky... The chartjs plugin attempts to load chart.js as a module id, but it is actually just a file name. This causes RequireJS to try and load it as a file even though it has been set up in the require.config.paths. To work around this issue, I implemented a small workaround:

<script src=https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js></script>
<script>
    require.config({
        paths: {
            jquery: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min',
            'chart': '//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle',
            hammerjs: '//cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min'
        }
    });

    var originalDefine = define;

    window.define = function (a, b, c) {
        // When chartjs-plugin-zoom.min.js tries to load chart.js, we load the chart module from the defined paths :)
        if (a && a.length && a[0] === 'chart.js') {
            a[0] = 'chart';
        }
        originalDefine(a, b, c);
    };

    require([
        'jquery',
        'chart',
        'hammerjs',
        '//cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c4a7aca5b6b0aeb7e9b4a8b1a3adaae9beababa984f4eaf3eaf1">[email protected]</a>/dist/chartjs-plugin-zoom.min.js'
    ], function ($, chart, hammer, chartjs) {
        'use strict';
        console.log('hello world');
        console.log($, chart, hammer, chartjs);
    });
</script>

The workaround worked successfully, so everything should now load correctly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can express middleware be reloaded in the correct manner?

I currently have a basic express application running. However, I am looking to refresh the middleware when triggered by a specific event. The following code achieves the desired result (the middleware now incorporates updated configuration), but I am unc ...

javascriptnode.jsexpress

I am looking for a way to access an array from Node.js using JavaScript and EJS. How can I achieve this

Currently, I am developing an app that requires passing an array from the server to the client. Initially, I attempted the following: // Server app.get('/', (req,res) => { res.render('index', { data: ["Hello"] }) }) ...

javascriptnode.jsexpressejs

Javascript does not function on sections generated by ajax

I'm facing an issue with a JavaScript function not working on a dynamically generated part using AJAX. Here is the AJAX call: <script> $(window).on('scroll', function() { $("#preloadmore").show(); if ($(window).height() + $(window ...

javascriptjqueryhtmlajax

JavaScript objects compared to arrays and JSON format

After countless hours of searching and frustration, I am still struggling to clearly define the distinctions between json, objects, and arrays (in javascript). Take a look at how I've been working with 2-dimensional data containers (trying to avoid us ...

javascriptjson

Tips for making jQuery DataTables switch between multiple DOM tables?

I am working on a project where I need to display different jQuery Datatables based on the selected option in a <select> element. The data for each Datatable is stored in hidden DOM <table> elements: <!-- Make sure jquery.dataTables.css and ...

javascriptjquerydatatables

Uploading a file to a .NET Framework API Controller using React

I am trying to figure out how to send files in the request body to an API controller in .NET framework using React. My goal is to achieve this without changing the request headers, so I want to send it as application/json. What I am looking for is somethi ...

javascriptc#.netreactjs.net-4.8

unable to retrieve the properties of req.user

Currently, I am working on developing a multiplayer game that involves a login system. Within my app.js file, the following code snippet allows me to access user information: app.use(function (req, res, next) { res.locals.success_msg = req.flash('s ...

javascriptnode.jsmongodbexpress

What is the best way to incorporate sorting functionality into my CRUD table?

Below is the backend code snippet: app.get("/sortedcustomers", (req, res) => { db.query("SELECT * FROM customer_info ORDER BY contacted", (err, result) => { if (err) { console.log(err); } else { res.send(result); } }); }); ...

javascriptnode.jsreactjsfrontendbackend

The output from `http.send` on the Node + Express backend is displayed as [object object]

When I make a request using http.send in my Node.js backend, it returns [object object]. <script> const newExerciseForm = document.getElementById("newExercise"); newExerciseForm.addEventListener("submit", function (e) { e.pre ...

javascriptnode.jsexpressobjectxmlhttprequest

Error: Encountered an unexpected token within the node_modules/aws-iot-device-sdk/thing/index.js file

I've integrated the aws-iot-device-sdk into our reactjs application. However, we encountered an error while trying to execute the command NODE_ENV=production npm run compile. The error message I received pertains to a syntax issue in the file paths me ...

javascriptreactjsamazon-web-servicesnpmwebpack

Change the body class on touch start instead of using .scroll()

My JavaScript code is designed to add a class to the <body> element while the user scrolls: var $body = $('body'); $(window).scroll(function() { $body.addClass('scrolling'); var scroll = $(window).scrollTop(); if (scr ...

javascriptjqueryiosmobilescroll

Refresh the image following the ajax request

I seem to be encountering some difficulties. Whenever I click to rotate an image using ajax and save the new image, it does so without refreshing the page. However, the issue arises when the old image is not updated with the new one that is refreshed. Fu ...

javascriptjqueryhtmlajax

Solving the challenge of converting images to text using react-native and the @react-native-ml-kit/text-recognition package

As I work on my react native project, I have encountered a challenge. I am trying to implement a feature that allows users to either take a photo or select one from their library. Once the image is chosen, I want to extract all the text from it and display ...

javascriptiosreactjsreact-nativeocr

Replacing jQuery.ajax from a different directory/domain - problem with using relative URLs

We are incorporating scripts from various sources and domains, including one that contains the definition for jQuery.ajax function. Calls to jQuery.ajax are being made from different places and domains using relative URLs, such as jQuery.ajax("my/relativ ...

javascriptjqueryajaxoverridingrelative-path

Unable to refresh page in Angular without hashtag is causing issues

My web application is built using Spring, Angular, and Rest. I successfully removed the hashtag from the URL by implementing the following code: if(window.history && window.history.pushState) { $locationProvider.html5Mode(true); } in index.ht ...

javascriptangularjsspringresthttp

Merge the values into an array based on their shared id within a JSON object

Is it possible to map JSON objects with duplicate id values to their association property in an array using JavaScript after a join operation? { "id": 1, "name": "doc 1", "appointmentTime": "2018-12-28T00:00:43" }, { "id": 2, "name": ...

javascriptjsonobject

Save the current time and date to a database by executing a mysql_query

<form action="actionMAppointment.php?stu_id=<?php echo $row_RecEdit['stu_id'] ?>" method="post"> Time: <input type = "time" name="appointmentTime" id = "appointmentTime" /> Date: <input type = ...

javascriptphpmysqlsqldatabase

How can you stop queuing animations and timeouts in jQuery?

I'm facing a seemingly simple problem that I need help with. On my website, there's a hidden div.notification bar at the top. This bar can be displayed by adding either the success or warning class to it. There are two scenarios: either a messa ...

javascriptjquerytimeoutdelaytiming

What is the best method for enabling HTML tags when using the TinyMCE paste plugin?

After spending countless hours searching for a solution, I am still puzzled by this problem. My ultimate goal is to have two modes in my powerful TinyMCE editor: Allowing the pasting of HTML or Word/OpenOffice text with all styles and formatting attribu ...

javascriptjqueryjquery-pluginstinymcewysiwyg

What is the best way to develop shared singleton components that work seamlessly across various platforms?

How about developing a React component called LoadingMask that can toggle the display of a loading mask based on the current state? The purpose would be to show the mask before an ajax call and hide it once the data is received. To avoid showing multiple ...

javascriptajaxreactjs