Web-animations.min.js throw exception when using it with Webpack

[ujeenator]

Error message:
Cannot set property 'true' of undefined

Error occurred on the very first line:
function(a,b){b["true"]=a

Reason - window object is captured with incorrect code:
function(){return this}

Correct way to get window object (this code taken from jQuery source):
typeof window !== "undefined" ? window : this

[dstoc]

What is Webpack? The capturing of window seems to be a result of uglify.

[shans]

(i.e. this is not a bug in web-animations - would you mind following up with the authors of uglify?)

[ujeenator]

Okay, I have examined your Gruntfile.js

In function compress(...) at line #59 you enable option of UglifyJS:
record.options.wrap = true;

What actually this option do?...

It considers that your code is CommonJS module
and wrap it with anonymous function
for using it in browser:

(function(exports,global){
    global[""]=exports;
    /* 
        Your module code

        exports.blablabla = function() { ... };
    */
)({},function(){return this}());

Since your code is web-browser polyfill (not a CommonJS module)
and it doesn't export anything with "exports" variable
then you have no need of using "wrap = true" option.

Also this will fix compatibility problem with Webpack and Browserify.

[xseignard]

Hello,
It seems this problem is still happening, isn't it?

Any hints on fixing this?

Best regards,

Xavier

[ujeenator]

@xseignard

Try replace this (in the end of web-animations.min.js file):

function(){return this}()

With this:

typeof window !== "undefined" ? window : this

[xseignard]

Hi @AmberDeBlack
Thanks for the tip! But I will not maintain my own version of the polyfill, the best would be for this polyfill to handle that case since it's a pretty standard case, isn't it?

Best regards,

Xavier

[ujeenator]

@xseignard

Sure :)

But I'm not maintainer of this repo

And maintainer declined my workaround for this problem (read messages above)

[ghost]

I had a similar issue, but in my instance it was caused by the module option of preset-env being set on babel-loader. When I set this option to false it worked.

[Brian-McBride]

I was able to fix this by doing two things:

1. Don't process it by babel-loader. The file is already es5 and minified. No reason to further run it through babel.
2. Add a shim in webpack.config.js
   https://webpack.js.org/guides/shimming/#imports-loader

{
    test: /web-animations-next-lite.min.js/,
    use: 'imports-loader?this=>window',
},

You can tweak this, but basically it is setting the "this" reference to "window".

[alan-agius4]

Hi, I really don't agree that this is a not a bug in web-animation-js.

As this issue is also present when not using any bundler nor minifier. If one loads this script using type="module", it will fail because the this context will be undefined when adding the type=module attribute on a script tag.

<script>
  alert(this);  // = window
</script>

<script type="module">
  alert(this); // = undefined
</script>

I hope, that you can reconsider the fact that this is an issue.

Thanks,