Extension Development: How to resolve "Mismatched anonymous define() module"?

[ttakahashi]

Prerequisite: I've read the requirejs documentation, the Sense API documentation, and the other example extensions.

I'm building an extension for Qlik Sense, and I keep getting the below error when viewing my app from the browser (Chrome). My extension works as intended on the Desktop client.

Error: Mismatched anonymous define() module: function () {

        return e

    }

http://requirejs.org/docs/errors.html#mismatch

    at makeError (http://localhost:4848/resources/js/external/requirejs/require.js?1410305350795:6:1016)

    at r (http://localhost:4848/resources/js/external/requirejs/require.js?1410305350795:6:4585)

    at Object.f [as require] (http://localhost:4848/resources/js/external/requirejs/require.js?1410305350795:6:10850)

    at requirejs (http://localhost:4848/resources/js/external/requirejs/require.js?1410305350795:6:14183)

    at k (http://localhost:4848/resources/assets/client/client.js??1410305350795:60:7527)

    at ExtensionType.b.extend.load (http://localhost:4848/resources/assets/client/client.js??1410305350795:60:10926)

    at Object.e.setType (http://localhost:4848/resources/assets/client/client.js??1410305350795:60:1128)

    at http://localhost:4848/resources/assets/client/client.js??1410305350795:60:1278

    at l (http://localhost:4848/resources/js/external/requirejs/require.js?1410305350795:43:17748)

    at l (http://localhost:4848/resources/js/external/requirejs/require.js?1410305350795:43:17748)

I'm basing my extension off some of the paradigms from the Angular and Peoplechart example extensions. Namely, I'm separating the painting logic from the properties, keeping them in separate JS files. I'm also calling some other helper JS and CSS files in the main define() module, but it all seems to be just extending the paradigms in the documentation and the examples.

Has anyone else run into this and resolved it?

Thanks!

[ToniKautto]

Any chance you could share a small sample extension, so that the issue can be reproduced?

[ErikWetterberg · Accepted solution]

Hi,

Some things you could check:

- are your module names unique?? That is are there any conflicting names??

- do you load any third party library that does not work well with requirejs??

Erik

[ttakahashi]

Ahh, thank you so much. Thanks to your suggestions, I fixed it!

I was loading a large collection of 3rd-party JS libraries, one of which was calling define() inside it. The error from RequireJS that I pasted above was actually telling me the problematic area. I searched through my external JS file and found that there was actually a function directly adjacent that was calling define() to be AMD-compliant.

Now having removed the offending bits of code, my extension works properly inside the Desktop and Browser clients.

[Alexander_Thor]

Hey Takeshi,

If the third party library you are integrating already is AMD-compliant you can simply pass that file in as a dependency to your extension.

For example, assume I want to include the library D3 into my extension. D3 is AMD-compliant so I can either load it locally or over the web as a dependency to my extension. Require will automatically resolve those dependencies for you.

Example:

define(["./d3.min", 'http://d3js.org/d3.v3.min.js'], function(d3, d3web) {

    //The D3 library is now loaded from a local file and ready to use

    console.log(d3)

    //The D3 library is also loaded over the web and ready to use

    console.log(d3web)

});

The first parameter to the define method is an array or dependencies. The second parameter is the function to be called once all the dependencies has loaded. That function is called with the deps. as parameters so you can assign them whatever to whatever local namespace you like without polluting the global scope.

[fabian3684386]

I'm facing a very similar case where my extension seems to have crashed importing the d3.min.js (Version 7.8.5) in all cases even when I apply a different name to it first once I open the selections pane once (Mismatched anonymous define error triggered and invalid visualization shown in frontend and payload to AWS SQS Queue contains JS of d3 code function)

Also it did not help I changed to d3customVersion as an import name and then re-declared within the extension via:

let d3 = d3CustomVersion;

And weirdly I found out: Qlik somehow overrides the d3 object globally otherwise I suspect as undocumented inconsistent behaviour, potentially maybe also causing requireJS to get confused? but that is only my suspicion because I saw suddenly appear (without importing it) under console.log(d3) a really old d3 version 3.X.X

and I still couldnt solve this

Edit: Was now able to fix it and the gost d3 injection that was invisible was actually the error

(I used the other d3 version at one point deep within the extension without realizing)

fix was to declare new variable d3CustomVersion and pass it along to all functions.....