CODEWITHSUNDEEP
polymerpolymer-1.0
Fausto R.
Fausto R.

Reputation: 1334

Polymer is not defined, Reference error in Firefox

What is missing in this simple code, that fails in Firefox while works fine in Chrome?

<!DOCTYPE html>
<html>
<head>
<base href="//polygit.org/components/">
<script src="webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="paper-material/paper-material.html">

<dom-module id="ui-firefox">
  <template>    
    <paper-material>Can you see me in Firefox?</paper-material>
  </template>
  <script>
    Polymer({
      is: "ui-firefox",
      ready: function(){ console.log("Am I ready?"); }
    });
  </script>
</dom-module>

</head>
<body>
  <ui-firefox> </ui-firefox>
</body>
</html>

A fiddle sample here https://jsfiddle.net/s4oh43za/

I have read a few posts, but I couldn't find the solution for this simple case
Thanks in advance, Fausto

Upvotes: 0

Views: 588

Answers (1)

tony19
tony19

Reputation: 138266

My guess is Firefox loads HTML imports in a different way.

The Polymer docs recommend wrapping your dom-module script in HTMLImports.whenReady(function() {...}) when it's defined in index.html. This modified version of your jsfiddle works in both Firefox and Chrome after following that recommendation.

Upvotes: 2

Related Questions