CODEWITHSUNDEEP
javascriptpolymer
hawkett
hawkett

Reputation: 3083

Difficulty using HTML import for javascript dependencies with polymer on Firefox & Safari

I'm building a Polymer application and having difficulty importing javascript dependencies. I've reviewed this question, but the solution isn't working for me - the lodash javascript doesn't load via HTML Import. Use of lodash is just an example, the problem exists for any library I try to import this way.

The following test code works fine in chrome, but not in firefox or safari (unless I vulcanize it, which I shouldn't need to do).

index.html

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Test Page</title>

      <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.6.0/webcomponents.min.js"></script>

      <link rel="import" href="components/lodash/lodash.html">

      <link rel="import" href="components/test-component/test-component.html">
    </head>
    <body fullbleed unresolved>
      <script>
        window.addEventListener('WebComponentsReady', function(e) {
          console.log("Web Components Ready!");

          document.body.appendChild(document.createElement("test-component"));

          console.log("Index:" + _.now());
        });
      </script>
    </body>
    </html>

NOTE 1: WebComponentsReady fires after HTMLImportsLoaded (see here)
NOTE 2: I've tried webcomponentsjs 0.5.5 too

test-component.html

<link rel="import" href="../../bower_components/polymer/polymer.html">

<link rel="import" href="../lodash/lodash.html">

<polymer-element name="test-component">
  <template>
    <style>
      :host {
        display: block;
        font-size: 2em;
        color: cornflowerBlue;
      }
    </style>

    <div id='test_elem' on-tap="{{go}}" fit layout horizontal center center-justified>
      Click Me!
    </div>

  </template>

  <script>
    Polymer({
      ready: function() {
        console.log("test-component component ready!");
      },

      go : function(event, detail, sender) {
        console.log("Component:" + _.now());
      }
    });
  </script>
</polymer-element>

lodash.html

<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>

The ordered output from the safari console:

Web Components Ready!
test-component component ready!
ReferenceError: Can't find variable: _

Reducing the complexity still gives the same problem:

index.html (simpler version)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Test Page</title>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.6.0/webcomponents.min.js"></script>

  <link rel="import" href="components/test-component/test-component.html">
</head>
<body fullbleed unresolved>
  <test-component></test-component>
</body>
</html>

I can click on the component at any time after page load and the error still occurs - lodash.js is never available to it. I'm sure there's something obvious I'm missing here, but I'm struggling to resolve it.

Upvotes: 3

Views: 2247

Answers (2)

Christian
Christian

Reputation: 4094

You could use a ready to use lodash component like this one: https://github.com/Waxolunist/lodash-element

Upvotes: 0

muymoo
muymoo

Reputation: 1177

In lodash.html, remove type="application/javascript" from 

<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>

UPDATE

I've filed a bug with webcomponents.js here: https://github.com/webcomponents/webcomponentsjs/issues/273

Upvotes: 2

Related Questions