4.1.1.1 fails on older browsers with "mismatched anonymous define" error

[thet]

Lazysizes registers itself as an AMD module, if define.amd is defined. Doing so results in the infamous failure "Error: Mismatched anonymous define" from RequireJS.

I didn't see this problem with current browsers - maybe the async call of the script is preventing it. But I get it for Firefox 36 and Safari 9.1 - when not force reloading the site.

define and require should be undefined/redefined like it's done here:

https://github.com/plone/Products.CMFPlone/blob/3fb2e9c4ce6772ce05623cf3b85e18a76d13dae2/Products/CMFPlone/resources/browser/scripts.pt

[hvelarde]

AFAIK, we're not supporting such older browsers on purpose: Firefox 36 was released in Feb/2015 and Safari 9.1 before Sep/2015, can you confirm, @rodfersou?

@thet see: https://github.com/collective/collective.lazysizes/blob/4.1.1.1/webpack/package.json#L18

[thet]

But the fact that it's working with current browsers at the moment is that lazysizes must be loaded at the very end by modern browsers. Our ReqiuireJS setup in Plone requires resources be properly registered with a name otherwise the "Mismatched" error occurs. The unregistering/reregistering of define/require is normally handled by the resource registry for all non-compiled bundles. Now we have to do it ourselves. I'm preparing a PR.

[rodfersou]

@thet we should not keep looking for those old browsers, the majority of them are "evergreen browsers" what means that they update themselves automatically.

[thet]

@rodfersou I'd love to agree, but a client is stuck on Firefox 36 and Safari 10 because of an very ancient Mac OS version on quite old hardware. Since this is a easy fix, I'd prefer to solve it (will look into it later).

[rodfersou]

@thet we find out that using:

<script defer

instead of

<script async

makes more sense https://community.plone.org/t/help-special-attribute-script-async/7270

maybe this can help with this bug also

[hvelarde]

@rodfersou no, every case is different; there's no reason to use defer here.

[rodfersou]

@hvelarde than you should change from:

<script async...

to:

<script async="async"...

Since our page template automatically change to:

<script async=""...

And this don't work as desired.

[hvelarde]

that's incorrect; as you can read here:

A number of attributes are boolean attributes. The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace.

The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.

that means that async, async=true, async=false, async="" and async="async" are all equivalent.

latest release is in production and is working as expected: https://www.redebrasilatual.com.br/

[rodfersou]

Well.. I just see the browser behavior change with async other day.. looked like a mandelbug..

[hvelarde]

@thet I have released https://pypi.org/project/collective.lazysizes/4.1.2/ that should fix the issue.

[rodfersou]

I found out that our problem was this option that we were missing to generate UMD module without having problems with requirejs https://webpack.js.org/configuration/output/#output-umdnameddefine

Now there are no exception, but in my use case don't work as expected since I have some initialization code that is not running: https://github.com/collective/collective.cover/blob/use-webpack/webpack/app/cover.js#L13-L34

@thet can you guide me please on how to execute some code after import the library in requirejs?

[rodfersou]

@thet also noticed that even including my library in requirejs the object is not accessible, it should happen because of your comment that Plone reset defaults for some reason.

[hvelarde]

let's talk about this in https://community.plone.org/.