Polymer / tools

Polymer Tools Monorepo
BSD 3-Clause "New" or "Revised" License
430 stars 200 forks source link

polymer-cli 1.1.0 breaks polymer elements creation #2456

Open dnhyde opened 7 years ago

dnhyde commented 7 years ago

Description

I was following the tutorial to create my first element, first try was with polymer-cli 1.0.0, and everything went fine. However after updating to polymer-cli 1.1.0 I get several resources non found (as a consequence Polymer not defined). I guess it may be related to how Polymer handles HTML Imports. I read as well that bower is still supported but marked as deprecated in favor of yarn + webpack, maybe this creates unexpected behaviours? I hope I'm not doing anything wrong I just followed the guide as I did using polymer-cli 1.0.0 hope this helps.

Versions & Environment

Steps to Reproduce

I just followed the tutorial, then launched with polymer serve (tried polymer build as well, but produces only the index.html no bower_components etc...)

Expected Results

Seeing my custom element. As it happened with polymer-cli v1.0.0

Actual Results

Errors thrown:

(index):4 GET http://localhost:8081/webcomponentsjs/webcomponents-lite.js 
(index):1 GET http://localhost:8081/polymer/polymer.html 404 (Not Found)
(index):1 GET http://localhost:8081/iron-icons/iron-icons.html 404 (Not Found)
(index):1 GET http://localhost:8081/polymer/polymer-element.html 404 (Not Found)
(index):1 GET http://localhost:8081/iron-icon/iron-icon.html 404 (Not Found)
icon-toggle.html:20 Uncaught ReferenceError: Polymer is not defined
    at icon-toggle.html:20
(anonymous) @ icon-toggle.html:20
demo-element.html:29 Uncaught ReferenceError: Polymer is not defined
    at demo-element.html:29
(anonymous) @ demo-element.html:29
:8081/service-worker.js:1 A bad HTTP response code (404) was received when fetching the script.
:8081/service-worker.js Failed to load resource: net::ERR_INVALID_RESPONSE
gudatcomputers commented 7 years ago

are you running polymer serve from the root of your app? it should be trying to load http://localhost:8081/bower_components/webcomponentsjs/webcomponents-lite.js I believe. Polymer itself isn't handling HTML imports.

dnhyde commented 7 years ago

Hi, yes running polymer serve from app root.
when i try to load http://localhost:8081/bower_components/webcomponentsjs/webcomponents-lite.js I get: Resource interpreted as Document but transferred with MIME type application/javascript: "http://localhost:8081/bower_components/webcomponentsjs/webcomponents-lite.js". And I can actually see the RAW script on load, meaning the script is actually there but polymer cannot find/load it?
I just cloned the repository and did not modify anything, however I noticed that polymer serve now redirects on http://localhost:8081/demo/ can't remember if the "demo" endpoint was present in version 1.0.0 as well...

Steps to Reproduce

Anyone managed to replicate the error? (tried on chrome and safari)
1) Clone repository 2) run polymer serve

Seems so simple that I might be missing something evident, sorry if that is the case.

Homa commented 7 years ago

You should use webcomponents-loader.js instead of webcomponents-lite.js.

dnhyde commented 7 years ago

Hi, thanks but nothing changed. Cannot find webcomponents-loader.js either. I noticed that polymer serve does not load the "bower_component" folder (tried also with the external Google OK Server for Chrome, thinking that not loading the folder was related to polymer serve) but the folder "bower_components" is not there (not in "Sources" when inspecting the page), meaning loading the following will fail:
http://localhost:8081/bower_components/webcomponentsjs/webcomponents-lite.js
(I double checked that "bower_components" is in the root folder after running bower install)

I tried to delete the "bower_component" entry from the example's bower.json ignore section but got the same behaviour:

  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],

I am missing why the whole "bower_components" folder is not loaded or why webcomponents-lite.js orwebcomponents-loader.js are not loaded while some components e.g. iron-icons appear in "Sources" when inspecting the page.

Homa commented 7 years ago

You can look at this test repo that I created: https://github.com/Homa/polymer2-test

stale[bot] commented 4 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.