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

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.

[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()
  }

[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.