Qlik Community

Qlik Sense Integration, Extensions, & APIs

Discussion board where members can learn more about Integration, Extensions and API’s for Qlik Sense.

ttakahashi
New Contributor

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

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!

1 Solution

Accepted Solutions
erik_wetterberg
Honored Contributor

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

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

Erik Wetterberg
https://extendingqlik.upper88.com/
4 Replies
Employee
Employee

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

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

erik_wetterberg
Honored Contributor

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

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

Erik Wetterberg
https://extendingqlik.upper88.com/
ttakahashi
New Contributor

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

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.

Employee
Employee

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

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.

Community Browser