Does not work for AppLocalizeBehavior

[aruntk]

Does not work for AppLocalizeBehavior

[emrass]

@camargo If I understand this correctly, you are having this issue for web-animations Polyfill? One way to deal with this would be to exclude it from your bundle. This might also be better for performance of your site, because your users might already have web-animations cached in their browsers, so it can be served from cache (not possible when it is included in your bundle).

Just remove any references to web-animations from any source files included in your bundle. Then add the reference to web-animations to a <script> tag in your index.html.

[emrass]

Ps: After temporarily removing app-localize-behavior from my application, I received a similar issue from another library (same setup: a dependency Polymer component links an external lib js file). So the problem does not seem to be limited to AppLocalizeBehavior.

[emrass]

Digging deeper, this might be caused by intl-messageformat defining an IIFE that is called like this:

(function() {
  // code here
}).call(this);

After running through wc-loader, this comes out as:

(function() {
  // code here
}).call(undefined);

[emrass]

Just to confirm this seems to be the root cause, I found that paper-menu-button relies on (dependency chain following): iron-dropdown -> opaque-animation -> web-animations -> web-animations-next-lite.min.js.

web-animations-next-lite.min.js raises a related issue: Uncaught TypeError: Cannot set property 'true' of undefined. The reason seems to be that web-animations-next-lite.min.js defines a function which is immediately invoked at the very end of the file:

function(a,b){/* ... */}({},function(){return this}())

Here, this is supposed to be window, but is undefined in the context of the wc-loader-bundled webpack file.

[emrass]

Update: this is likely caused by external files (those in bower_components or node_modules) being run through babel-loader. Without applying babel-loader to these files, it seems to work fine. I need to work a little more on that, but if this can be confirmed, this issue can be closed.

[emrass]

This issue was due to external dependencies being babelified. This issue can be closed. If you're stumbling upon the same issue - this is how I solved it:

webpack.config.js

/* ... */
    module: {
        rules: [{
            test: /\.html$/,
            use: [
                'babel-loader?presets[]=es2015',
                'wc-loader'
            ],
            exclude: /(node_modules|bower_components)/
        }, {
            test: /\.html$/,
            use: 'wc-loader',
            include: /(node_modules|bower_components)/
        }, { /* ... */ }],
    },
/* ... */

[camargo]

@emrass This is still an issue for me even after the workaround you mentioned. Do you have any other ideas on how to fix this? Thanks.

[emrass]

@camargo Could you post the relevant part of your webpack.config and the error message you get in the console? I'll have a look at it to see if there are any similarities to my case.

[camargo]

@emrass The console is giving: Uncaught TypeError: Cannot set property 'true' of undefined. It is the same issue you discussed in this thread. It is also being discussed here: web-animations/web-animations-js#45.

[camargo]

@emrass This worked like a charm. Thank you for your help.