Stencil: require.js throws Mismatched anonymous define() in Firefox

[edsilv]

Stencil version:

 @stencil/[email protected]

I'm submitting a:

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior:

Stencil includes a minified es6-promise shim in a component's dist files. This has an anonymous define, which in Firefox consistently causes requirejs to throw a Mismatched anonymous define() error if it is defined before other modules.

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

Expected behavior:

No error should be thrown.

Steps to reproduce:

I have created a test harness here:

https://github.com/edsilv/stencil-test-harness

This is designed to re-create the same conditions as the Universal Viewer (https://github.com/UniversalViewer/universalviewer), which is where the issue was first noticed.

When the timeout is set to a 3 second delay to simulate waiting for other scripts to load, iiif-gallery anonymously globally registers es6-promise before anything else is defined, and the error is thrown.

When there is no simulated delay, deps.js is globally defined before iiif-gallery, and no error is thrown.

As an experiment I included es6-promise as a script tag in the head instead of iiif-gallery with a 3 second delay. I expected to get the same error, but didn't - is stencil doing something else here?

[email protected] has the regular build including the anonymous es6-promise define, and consistently throws the error.

[email protected] (commented out in the test harness) has a manually altered dist file, where es6-promise does not have the anonymous define. This does not throw the error.

Is it possible to alter the build process to use a different promises polyfill?

Other information:

[jgw96]

Hey, thanks for opening an issue with us! Correct me if im wrong, but if you move the script to load iiif-gallery to the bottom of the body then you would not run into this issue correct?

[edsilv]

Just tried that in the test harness and still getting the same error.

[jgw96]

Got ya. Hmm, so reading back through the issue again, it looks like iiif-gallery 0.0.10 fixed this issue? At this time there is not a good way to alter what polyfills are added for browsers that do not support web components (such as firefox)

[edsilv]

I didn't _fix_ it as such, was forced to manually hack the generated dist file so that the es6-promise polyfill didn't include the define.

This obviously isn't an acceptable solution going forwards.

I get the impression that the Promises polyfill is always added, as Firefox definitely supports them :-)

This is a blocker for the universalviewer.io project adopting stencil as it uses requirejs heavily. Really keen to get going with stencil... Please let me know if there's anything that can be done about this.

[bassettsj]

I am also having this problem with the es6-promise polyfill UMD section. I can fix this by changing the build.

[jthoms1]

@edsilv I was looking at the test repo you provided but do not see the error did you patch your test repo dist file?

[edsilv]

@jthoms1 I can reproduce it in Firefox with the latest on gh-pages.
v0.0.10 of iiif-gallery is patched but is commented out. v0.0.8 should give you the error.

[jthoms1]

Commit ffcbb14b678e875709bcca36722fa5dcddd0c0e5 fixes this issue by changing the polyfill to no longer be a umd.