Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Vulcanized file doesn't work in Firefox "ReferenceError: Polymer is not defined" #1818

Closed
bwh-rl opened this issue Aug 21, 2015 · 11 comments
Closed

Vulcanized file doesn't work in Firefox "ReferenceError: Polymer is not defined" #1818

bwh-rl opened this issue Aug 21, 2015 · 11 comments
Labels
Package: bundler

Comments

@bwh-rl
Copy link

bwh-rl commented Aug 21, 2015

Got trouble to get a vulcanized polymer project running in firefox.
The page is total empty in Firefox and i get these error:
"ReferenceError: Polymer is not defined"

I striped it down to these examples:

Test element ff-test.html:

<dom-module id="ff-test">
    <template>
        Test FF.
    </template>
</dom-module>
<script>
    Polymer({
        is: "ff-test"
    });
</script>

Not Vulcanized test file (works in Chrome and Firefox)

<!doctype html>
<html>
    <head>
        <title>FF Test</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
        <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
        <link rel="import" href="bower_components/polymer/polymer.html">
        <link rel="import" href="ff-test.html">
    </head>
    <body>
        <ff-test></ff-test>
    </body>
</html>

Vulcanized test file (works only in Chrome, not in Firefox)

<!doctype html>
<html>
    <head>
        <title>FF Test</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
        <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
        <link rel="import" href="bower_components/polymer/polymer.html">
    </head>
    <body class="fullbleed">
        <div hidden="" by-vulcanize="">
            <dom-module id="ff-test" assetpath="/">
                <template>
                    Test FF.
                </template>
            </dom-module>
            <script>
                Polymer({
                    is: "ff-test"
                });
            </script>
        </div>
        <ff-test></ff-test>
    </body>
</html>

I get the same problem when webcomponents-lite.min.js and polymer.html are also inline.
@bwh-rl
Copy link
Author

bwh-rl commented Aug 21, 2015

Tested with:
polymer: 1.1.1
webcomponentsjs: 0.7.12
vulcanize: 1.10.3

@nojaf
Copy link

nojaf commented Aug 21, 2015

Tried the same example in Firefox and IE11, it's a bug indeed.

@nojaf
Copy link

nojaf commented Aug 21, 2015

Workaround seems to be wrapping the code in "WebComponentsReady" listener

            <script>
                window.addEventListener("WebComponentsReady", function(){
                    console.log("ready");
                    Polymer({
                        is: "ff-test"
                    });
                });
            </script>

@xmakro
Copy link

xmakro commented Aug 22, 2015

I can confirm this, see #231

@bwh-rl
Copy link
Author

bwh-rl commented Aug 24, 2015

The example works with the "WebComponentsReady" listener, thanks :).
Is there a way to get vulcanize to build the html in this way?
Correcting a big project with lots of imports manual after each vulcanize would be pretty time consuming...

@bwh-rl
Copy link
Author

bwh-rl commented Aug 24, 2015

Found out that using crisper avoids this problem.

@dfreedm
Copy link
Member

dfreedm commented Aug 24, 2015

Looks like a polymer change. Bisected to Polymer/polymer@051e1bf

@dfreedm
Copy link
Member

dfreedm commented Aug 24, 2015

This also breaks safari, and I image every browser that isn't chrome.

dfreedm referenced this issue in Polymer/polymer Aug 24, 2015
@dfreedm
Remove forceUpgraded check in dom-module.import
b85b641 
Multiple elements depend on dom-module.import and may register before dom-module
is registered.

With the forceUpgraded check, only the first module to call .import will be
upgraded, typically custom-style.

This will break the subsiquent elements, such as dom-template.

Fixes Polymer/vulcanize#234
MartinMoizard referenced this issue in MartinMoizard/polymer Sep 8, 2015
@dfreedm
Remove forceUpgraded check in dom-module.import
d575ab0 
Multiple elements depend on dom-module.import and may register before dom-module
is registered.

With the forceUpgraded check, only the first module to call .import will be
upgraded, typically custom-style.

This will break the subsiquent elements, such as dom-template.

Fixes Polymer/vulcanize#234
@lastmjs
Copy link

lastmjs commented Aug 28, 2016 •
edited
Loading

@azakus I'm still getting this issue in FireFox version 47.0 and Polymer 1.6.1. Was the fix incorporated into Polymer? Or are we supposed to just wrap our code in a WebComponentsReady listener?

@OvermindDL1
Copy link

Still same issue in FIrefox 49.0.2 with Polymer 1.7.0, as well as the same issue happens in Microsoft Edge.

@gitact
Copy link

gitact commented Mar 1, 2017

Same issue in FIrefox 51.0.1 with Polymer 1.7.0. Really thinking to abandon Polymer and passing to Angular 2 It is a too unpredictable library...
Any really useful workaround?

@aomarks aomarks transferred this issue from Polymer/polymer-bundler Jan 3, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Package: bundler
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@dfreedm @aomarks @OvermindDL1 @nojaf @xmakro @lastmjs @gitact @bwh-rl