Tools: Polymer 1.10.0 does not work in Firefox when vulcanized

Created on 20 Aug 2015 · 8Comments · Source: Polymer/tools

Example:

<!doctype html>
<html>

<head>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="bower_components/polymer/polymer.html">
</head>

<body>
    <dom-module id="app-test">
        <template>
            <div>TEST</div>
        </template>
    </dom-module>
    <script>
        Polymer({
            is: "app-test",
            attached: function () {}
        });
    </script>
    <app-test></app-test>
</body>

</html>

Shows a blank page in Firefox when vulcanized.

bundler High Bug

Source

makroiss

Most helpful comment

For note, same issue with Microsoft Edge, HTMLImports.whenReady fixes it too. This should be documented a bit more clearly as I did not run across it in the documentation as far as I recall.

OvermindDL1 on 5 Nov 2016

👍2

All 8 comments

It doesn't look like your example page works as written in Firefox, even without vulcanize.

dom-module is not really supported in the main page, but you can make it work by wrapping the call to Polymer with HTMLImports.whenReady like this:

HTMLImports.whenReady(function() {
  Polymer({
    is: 'app-test'
  });
});

dfreedm on 20 Aug 2015

I tried to simplify it too much then. Still the problem persits. Make two files for example:

index.html:

<!doctype html>
<html>

<head>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="app-test.html">
</head>

<body>
    <app-test></app-test>
</body>

</html>

app-test.html

<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="app-test">
    <template>
        TEST
    </template>
</dom-module>
<script>
    Polymer({
        is: "app-test",
        attached: function () {
        }
    });
</script>

Shows a blank page when vulcanized in Firefox, but shows TEST in Chrome.

makroiss on 20 Aug 2015

I made this layout and it worked for me in Firefox after vulcanize.

dfreedm on 21 Aug 2015

Thanks for your effort. I uploaded an example to reproduce this. I used the newest version of Polymer, Vulcanize and Firefox 40.0.2 without any plugins on Windows.

http://we.tl/nnlWMhUyLE

vulcanize index.html > build.html

When you serve the directory, the resulting build.html shows TEST in Chrome but not in Firefox, while index.html works in both.

makroiss on 21 Aug 2015

hmmm just ran into this one in firefox, the fun ol blank page with no errors or anything, pretty sure once I add the

HTMLImports.whenReady(function() {

bit around each of my element registrations everything will work... This makes me think that perhaps we need to do this wrapping automatically in vulcanize or maybe throw an error in polymer.. like unable to find dom-module template for foo or something...

Anything would be better than the blank page and 0 error situation devs are currently greeted with in firefox when vulcanizing (which typically is only in production mode)

thoughts -- This seems like we should make this a priority to help devs ship portable polymer code .. right now this is a really tricky :bug: to :mans_shoe:

cc @ebidel @tjsavage @robdodson

samccone on 19 Feb 2016

@samccone Thanks for this - so thinking it's an intermittent timing issue?

tjsavage on 19 Feb 2016

Ok did some more thinking on this one and the issue is pretty interesting...

For the normal vulcanize build case the script tag is at the bottom of the elements import... thus this is never an issue, however if you want to force the browser to cache bust the elements.js file on deploy to a production facing site you will end up using the no script option inside of crisper... which give you the responsibility for including elements.js somewhere in your page

Now since the script tag could be outside of the sync DL and process path that the default approach takes ... (script tag at the bottom of the file) you can hit this issue!

Why this is an issue only in firefox.. is still a bit of a mystery to me, I am guessing there are some implementation wrinkles between firefox parse order and chrome parse order, perhaps @azakus has some insights on this :)

Anyway... I think this is a pretty interesting "common" path case for people -- and something worth figuring out

samccone on 19 Feb 2016

For note, same issue with Microsoft Edge, HTMLImports.whenReady fixes it too. This should be documented a bit more clearly as I did not run across it in the documentation as far as I recall.

OvermindDL1 on 5 Nov 2016

👍2

Was this page helpful?

0 / 5 - 0 ratings