RequireJS throws a "mismatch" error

[nwhittaker]

If a project is already using RequireJS, Web Font Loader detects it and creates an anonymous module. In cases where Web Font Loader is loaded statically via a script tag (e.g. Google Charts API), and not dynamically via AMD, it causes Require to throw a "Mismatched anonymous define() module" error. This error halts further JavaScript execution.

Please see plunker for example.

[kynatro]

I am also having this issue, but it only recently appeared. The plunker example posted by nwhittaker in the original posting still throws the error. Screenshot of the offending line in webfont.js: http://take.ms/3Iduw. This only recently started happening in our application; could this be a regression bug?

We are loading fonts from Google Fonts using the https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js file (currently returning an older version - 1.6.16). Removing the WebFontConfig code block fixes the issue. We have switched to loading the fonts directly via a <link> tag for now.

[bramstein]

Mm, this is probably caused by the UMD wrapper that was introduced when the Web Font Loader officially started supporting modules. I'm not that familiar with RequireJS, but it looks like creating a named module would create some other problems. Any suggestions?

[pre2612]

Is there a solution for this? Having same issues when trying to use it in Magento 2 project?

Any help would be appreciated!

[ioweb-gr]

@pre2612 Did you get anywhere with this?

[pre2612]

Yes it worked there was a solution found online which helped resolved it

On Fri, Dec 6, 2019, 6:59 AM IOWEB TECHNOLOGIES notifications@github.com wrote:

@pre2612 https://github.com/pre2612 Did you get anywhere with this?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/typekit/webfontloader/issues/278?email_source=notifications&email_token=AAVRAUHZPODMJCM3OO5EIVDQXI5DFA5CNFSM4BRIA7PKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEGD4FQQ#issuecomment-562545346, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAVRAUEBIQREAZDYTWI3ZCLQXI5DFANCNFSM4BRIA7PA .

[ioweb-gr]

@pre2612 Nice. Could you let us know what it was that helped you?

[Deepak-Bulani]

@nwhittaker , Did you got any success for this issue? I am still facing this issue and couldn't find any way out.

[ioweb-gr]

@Deepak-Bulani I faced a similar issue when trying to create my own library through webpack which would be published as an AMD module for use with requirejs.

After reading a lot about it I ended up in this section of the documentation.

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

Apparently if you pack your library in AMD format like this

define([], function(){})

and include it via script it will always produce a Mismatched anonymous define()

Even if you require it via requirejs it will randomly present this error. Once it will work and once it will fail because of the async loading order.

I ended up having to use a name in the define section of my module in order to make it work consistently even though it's recommended against this.

Reading further you will notice that if you use the RequireJs optimizer which will bundle the modules, it will also define a name automatically for each one of the defined modules.

So basically I think this issue is very relevant to what I faced and I haven't found a workaround with pure requirejs and my library other than naming the module itself.

[prdt3e]

https://github.com/requirejs/requirejs/issues/1479