Using Qlik with Webpack 1

Question

I'm using webpack 1 to try and import an external js file, written in the amd module pattern, from a product called Qlik, which does visualizations.

The project uses angular-fullstack yeoman generator, so the webpack config file is: https://github.com/angular-fullstack/generator-angular-fullstack/blob/master/templates/app/webpack.make.js

Trying to get something like this working within a webpack environment: https://gist.github.com/mindspank/905294636006b3b530a0#file-index-js-L19

The file I'd like to import and use: https://sense-demo.qlik.com/resources/js/qlik.js

I've tried things like scriptjs to load it, but webpack can't resolve it.

$script('https://sense-demo.qlik.com/resources/assets/external/requirejs/require.js', () => {
    require.config = {
        baseUrl: 'https://sense-demo.qlik.com/resources'
    }

    require(['js/qlik'], qlik => {
        let app = qlik.openApp(...);
    }
});
// throws Module not found: Error: Cannot resolve module 'js/qlik'

I've also tried adding it locally to the project and referencing it in webpack:

config.externals = {
    'qlik' : 'commonjs2 ./client/assets/js/qlik'
}

usage:
require(['qlik'], qlik => {
    console.log(qlik);
});
// throws Uncaught ReferenceError: require is not defined

or

config.resolve = {
    root: [
      path.join(__dirname, ('/client/assets/js'))
    ]
};
// throws tons of errors similar to:
ERROR in ./client/assets/js/qlik.js
Module not found: Error: Cannot resolve module 'cm.matchbrackets' in \client\assets\js

My problem is, I don't know how to use this external script through webpack. It can't resolve 'js/qlik' when run inside scriptjs and saving the qlik scripts and adding them locally hasn't been any better.

Any help would be greatly apprciated!

score 2 · Answer 1 · answered May 17 '17 at 12:21

Perhaps this could be of help?

We use Webpack 2 and Angular2 (with TypeScript) and solved it by including Qlik's require.js in the HTML-file, and then referencing it on the global scope like this:

const requireJs = (<any>window).requirejs;

const requireJsConfig = {
  host: <url>,
  prefix: '/',
  port: <port>,
  isSecure: true
};

const qlikConfig = {
  appId: <appId>,
  objectId: <objectId>
};

requireJs.config( {
  baseUrl: ( requireJsConfig.isSecure ? 'https://' : 'http://' ) + requireJsConfig.host + (requireJsConfig.port ? ':' + requireJsConfig.port : '') + requireJsConfig.prefix + 'resources'
});

requireJs(['js/qlik'], function (qlik) {
  let const = qlik.openApp(qlikConfig.appId, requireJsConfig);
  app.getObject(<container-div>, qlikConfig.objectId);
});

Using Qlik with Webpack 1

1 Answers1