`Error: Mismatched anonymous define() module` on the BBC website

[YoranBrondsema]

Hi,

We're trying to use iframe-resizer on an embed on the BBC website. However, it fails with the following errors:

Uncaught ReferenceError: iFrameResize is not defined
Uncaught Error: Mismatched anonymous define() module: function p(){function t(e,n){if(!e.tagName)throw new TypeError("Object is not a valid DOM element");if("IFRAME"!==e.tagName.toUpperCase())throw new TypeError("Expected <IFRAME> tag, found <"+e.tagName+">.");m.call(e,n)}return n(),e(window,"message",a),e(window,"resize",w),function(e,n){switch(typeof n){case"undefined":case"string":Array.prototype.forEach.call(document.querySelectorAll(n||"iframe"),function(n){t(n,e)});break;case"object":t(n,e);break;default:throw new TypeError("Unexpected data type ("+typeof n+").")}}}

This error is documented here: http://requirejs.org/docs/errors.html#mismatch.

If you manually code a script tag in HTML to load a script with an anonymous define() call, this error can occur.

I am solving it now by patching the iframeResizer.js code to always export a global, even if the page uses RequireJS modules. I thought it's something you should be aware of though.

[davidjbradshaw]

That's strange, as the tests load it in by require and don't have this issue.

[ace007]

Hi, I am having a similar issue. My code is being loaded onto a number of different websites some of which may or may not use RequireJS (or similar). Unfortunatly the global iFrameResize (in the window object) not set under certain conditions. It would be great if the iFrameResize object was always set in the global.

[davidjbradshaw]

I need to see a simple test case to look into this.

https://github.com/davidjbradshaw/iframe-resizer/blob/master/CONTRIBUTING.md

[ace007]

My code has no dependences and makes no assumptions about external frameworks or support libraries. It is given to clients to put on their web pages to work within their environment. Because of this it would be good if the global window.iFrameResize object was always set regardless of any other framework. Unfortunately the web page that was giving me problems have been changed (it's a clients not mine) and doesn't give any problems now. As I don't have the code for the original page I can't give a test case. I would have thought a simple option would be a try/catch around the createJQueryPublicMethod, define and module detection to catch the error whilst always setting the global.

[davidjbradshaw]

OK your the second person to suggest that the jQuery bit might cause an issue during load, if the page does something weird to make jQuery late load.

I'm going to add a check for $.fn before trying to add to it.

[moonray]

this still happens for me if I load iframe-resize after current version of requirejs

[davidjbradshaw]

What error do you get?

[robtree]

I get this error on https://www.cambridgechorale.org.uk/concerts/the-passing-of-the-year-cambridge because the https://helmtickets.com IFRAME widget is using the plug-in and the site uses require.js.

[trackmyapp]

@YoranBrondsema or anyone else who understood what was met

I am solving it now by patching the iframeResizer.js code to always export a global, even if the page uses RequireJS modules. I thought it's something you should be aware of though.

If anyone else gets stuck here, I just replaced define with require and it worked.

  if (typeof define === 'function' && define.amd) {
    require([], factory) //--> this is the line
  } else if (typeof module === 'object' && typeof module.exports === 'object') {
    // Node for browserfy
    module.exports = factory()
  }