Tried to use polymer without loading it first error.

[ryasmi]

Really struggling to figure out why I am receiving this error (see below).

You tried to use polymer without loading it first. To load polymer, <link rel="import" href="components/polymer/polymer.html"> 

Source code can be found at badseycc/fantasy-cricket.

[sjmiles]

Afaict, badsey-app-bar.html is the first import that loads and it doesn't import polymer.html, so you are trying to use polymer without loading it first.

[ryasmi]

So what is the difference between that code and this demo for another repo I made that works? https://github.com/badseycc/badsey-player/blob/master/demo/src/index.html.jade

[ebidel]

The difference is that https://github.com/badseycc/badsey-player/blob/master/dist/badsey-player.html includes an import to polymer-ui-toggle-button (though this should be at the top of the file rather than being in the <polymer-element> itself) which inevitably includes polymer.html.

The general rule of thumb is, if you're building an element using <polymer-element>, you should include an HTML import at the top of the file that includes polymer.html. It's a dependency.

[ryasmi]

Ok thanks @ebidel and @sjmiles. I've fixed the issue by importing '//cdnjs.cloudflare.com/ajax/libs/polymer/0.2.2/polymer.js' into my index.html file.

[sjmiles]

This is not a correct fix and you will have errors.

Instead, your element should import polymer.html as both the warning and ebidel have suggested.

[ryasmi]

Ok I'll change that then, thanks.

On 14 May 2014 21:55, Scott J. Miles [email protected] wrote:

This is not a correct fix and you will have errors.

Instead, your element should import polymer.html as both the warning and
ebidel have suggested.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/502#issuecomment-43136247
.

[robdodson]

@ryansmith94 what you'll want to do is something like this.

Take a look at the untitled-element starter project and follow the Getting Started guide in the readme. That should set you on right track 😸

[sjmiles]

Fwiw, I know this can seem nitpicky.

The reason we want you to treat polymer.html this way, is because we consider it a optional dependency for other components.

In the old days, your application (index.html) might require some framework (framework.js), and all the pieces inside would work with that framework.

In the new world, your application simply uses custom-elements (<badsey-player>) without the application worrying about the things the custom-elements need to make themselves work.

[ryasmi]

@robdodson Thanks for that 😄

@sjmiles That's cool, I understand that, I really like where this is taking the web so I'm happy to follow along with your best practises.

[ryasmi]

Is there a way to import this from a CDN or do I have to use Bower? I'm really not a fan of package managers, it just seems like extra hassle because you have to put a reference in the source anyway. Would be cool if there was something that read your source code, found and installed your dependencies.

[sjmiles]

So to continue my nitpicky ways, let me say that "import from CDN" and "use Bower" are apples and oranges.

IOW, there is a fair question which is: can I import from CDN, or do I have to have component-x installed locally? But this question is distinct from "use Bower" which is about how to get component-x installed locally.

Today, you cannot in general import some stuff from CDN and have other stuff imported locally. This is because if one component imports ../x-foo/x-foo.html and you have already imported x-foo from mycdn/x-foo.html the system can't figure out that's the same import (the URLs are different) and you have problems.

There is work ongoing to increase flexibility in this area, but right now you should avoid using CDN for anything that is imported.

As far as how to get x-foo.html installed, Bower is one way to do it, and yes, it's convenient because it automatically installs x-foo's dependencies. We are working on having alternative solutions that, for example, will provide ZIP files with all the dependencies, but for now you either install components by hand (for example, download ZIPs from GitHub, or check-out repositories) or use Bower.

The idea of having a tool that looks at the source and pulls down the necessary dependencies is interesting (but this would still be a package manager =P).

[ryasmi]

Ok, thanks for that explanation.

The idea of having a tool that looks at the source and pulls down the necessary dependencies is interesting (but this would still be a package manager =P).

Yeah I guess it would be a package manager, maybe a grunt or gulp plugin could look at the files and find the dependencies but use a package manager like bower or npm to install them.

Thanks for all of your thorough replies, I really appreciate it. 😄

[lukehutch]

This seems a bit circularly defined: you're supposed to import polymer.html at the top of the file, which currently includes the script polymer.js, which runs the polyfill code. However if your browser doesn't yet support HTML imports, and using an HTML import is the only right way to include Polymer, you're stuck. Optionally, you could include the script polymer.js (or webcomponents.js) yourself above the import of polymer.html, so that old browsers can handle the import, but then you get two copies of polymer (potentially different versions) being run.

I'm seeing this issue right now with HTML imports not working on Firefox. I think the only solution is to manually run webcomponents.js before the HTML import?

[ebidel]

Yes, for browsers that don't support the native APIs you need to load webcomponents.js in your main index.html page, before any HTML imports and other JS that touches the DOM. It's our recommendation to continue to include this file.

[toadkicker]

Hello guys I'm trying to wrap my head around this as well. To clarify then, for every element (e.g. created by using yo polymer:element), it has to include <link rel="import" href="../../bower_components/polymer/polymer.html"> and must be repeated for every element using ?

[robdodson]

@toadkicker if your element is importing other elements that also import polymer, then you can skip it. Otherwise, yes. It ensures that the dependencies are loaded before your element attempts to register.