Tools: Element template has bad paths in demo

Created on 6 Jun 2016 · 19Comments · Source: Polymer/tools

After polymer init and polymer serveproject in CLI,

"Uncaught SyntaxError: Unexpected token < " in first line of index.html

Recommended fix:
Add type="javascript" under webcomponents-lite.js script tags for resolving the issue

Init cli High Accepted Bug wontfix

Source

SayChunKim

Most helpful comment

@almielczarek I just realized that you are talking about the element template. Right now we don't support the application workflow with reusable elements. That means two things:

You can't build a reusable element - elements should be built in the context of an app, because we can't know that some dependency that would be bundled with the element isn't also used somewhere else, and we can't have more than one copy of a element/library in an app.
Element projects have to be served from a different URL than application projects because element projects use URLs that reach out of the project folder. That's why polymer serve prints this message:

Files in this directory are available under the following URLs
    applications: http://localhost:8080
    reusable components: http://localhost:8080/components/p1-element/

For elements, you need the second URL.

@SayChunKim I still haven't been able to reproduce this issue with the application template.

justinfagnani on 15 Jun 2016

👍5

All 19 comments

Which template are you initializing from? Can you include steps to reproduce from scratch?

FredKSchott on 6 Jun 2016

👍2

@FredKSchott thanks for pinpoint. It's from application template

polymer init
select > application
polymer build
polymer serve and F12

Problem reproduced with latest polymer CLI and Ubuntu 14.04

SayChunKim on 7 Jun 2016

I'm unable to reproduce. @SayChunKim do you have any more specifics on your environment?

justinfagnani on 9 Jun 2016

@SayChunKim can you also explain the bug & your fix a bit more? Does this error occur in the CLI, or on the page being served? And including type="javascript" on all script tags in the application solves the problem?

FredKSchott on 9 Jun 2016

I have encountered the same issue but I found a different fix. The version of polymer-cli I am using is 0.11.1 and I am on Windows 7.

The "element" template has some issues with the relative links on the imports. If you initialize the template then serve it and go to the demo page in your browser then check the network tab the developer tools in chrome it will show that instead of the webcomponents-lite.js file it is loading your html template file.

If you change the beginning of the hrefs to read "../bower_components/" instead of "../../" then everything loads correctly. I don't believe it has anything to do with the type property being "text/javascript" it seems as if the relative path specified does not exist so it is just loading the index.html file of the project root.

almielczarek on 9 Jun 2016

👍4

Ah... this makes a lot more sense. Thanks for digging into it @almielczarek!

justinfagnani on 10 Jun 2016

@almielczarek I just realized that you are talking about the element template. Right now we don't support the application workflow with reusable elements. That means two things:

You can't build a reusable element - elements should be built in the context of an app, because we can't know that some dependency that would be bundled with the element isn't also used somewhere else, and we can't have more than one copy of a element/library in an app.
Element projects have to be served from a different URL than application projects because element projects use URLs that reach out of the project folder. That's why polymer serve prints this message:

Files in this directory are available under the following URLs
    applications: http://localhost:8080
    reusable components: http://localhost:8080/components/p1-element/

For elements, you need the second URL.

@SayChunKim I still haven't been able to reproduce this issue with the application template.

justinfagnani on 15 Jun 2016

👍5

@justinfagnani I just ran into the same issue. polymer serve does not work for the element template (does not map /bower_components/) as you're probably aware.

What's the current suggested workflow/process for authoring an element?

I just tried to serve an app from another port and importing from http://localhost:8080/components/my-el/my-el.html but it's blocked by CORS. There doesn't seem to be a cors options for the polyserve (pending PolymerLabs/polyserve#45).

joaovieira on 15 Jun 2016

Nevermind.. read your last comment twice and figured it out 😬

Opening http://localhost:8080/components/my-el/ and http://localhost:8080/components/my-el/demo/ work just fine.

joaovieira on 15 Jun 2016

Hi, I'm using the polymer-cli O.12.0

I encounter the same issue here and something very weird

Using the second URL I'm getting two error.

Note: for your comprehension, I need to create my element the dist of another project

webcomponents-lite.js:1 Uncaught SyntaxError: Unexpected token <

And

GET http://localhost:8080/var/www/paper-paypal-component/dist/paypal/paypal-element/iron-component-page/iron-component-page.html 404 (Not Found)

Looking at the URL to be sure the path is correct, I saw that I've been redirected to this URL and the path is the full root path of the project.

Hope we can found out a solution, or as it has been said in a previous reply, or I need to drop out the element template project and just create my element ?

syu93 on 29 Jun 2016

@justinfagnani I just ran into this issue/design decision about the element builder. Just reiterating... serve elements separately and with the app itself? Do not worry about the paths in the element template? Could we document this somewhere?

claudiordgz on 30 Jun 2016

I'll get some documentation on this in the next release, and hopefully some better output from polymer serve and polymer build for element-style projects.

justinfagnani on 11 Jul 2016

I get this error running polymer init and selecting element on cli -v 0.12

pik on 25 Aug 2016

same issue for me - just updated to 0.16 (npm) - will try the latest from github

update: (applied the type="javascript" fix - but still get:

Works:
http://localhost:8080/components/my-element/demo/index.html

Not so much:
http://localhost:8080/components/my-element/demo
, which seems to redirect to the full filesystem path in the url bar for the demo path and throws:

/iron-component-page/iron-component-page.html Failed to load resource...

larsgk on 22 Oct 2016

I'm getting a very similar issue, but polymer serve works and polymer build does not.

Steps to reproduce:

polymer init
# → element
# → my-element

polymer serve
# works!

polymer build
# error!

Error content:

✘  poly-test  polymer build
info:    Building application...
info:    Generating build/unbundled...
info:    Generating build/bundled...
error:   Uncaught exception: Error: file path is not in root: /Users/donmccurdy/Documents/Projects/polymer/polymer.html (/Users/donmccurdy/Documents/Projects/poly-test)
error:   Error: file path is not in root: /Users/donmccurdy/Documents/Projects/polymer/polymer.html (/Users/donmccurdy/Documents/Projects/poly-test)
    at Object.urlFromPath (/Users/donmccurdy/.nvm/versions/node/v4.1.1/lib/node_modules/polymer-cli/node_modules/polymer-build/lib/path-transformers.js:41:15)
    at StreamAnalyzer.getFile (/Users/donmccurdy/.nvm/versions/node/v4.1.1/lib/node_modules/polymer-cli/node_modules/polymer-build/lib/analyzer.js:107:39)
    at StreamResolver.accept (/Users/donmccurdy/.nvm/versions/node/v4.1.1/lib/node_modules/polymer-cli/node_modules/polymer-build/lib/analyzer.js:210:34)
    at FileLoader.request (/Users/donmccurdy/.nvm/versions/node/v4.1.1/lib/node_modules/polymer-cli/node_modules/hydrolysis/lib/loader/file-loader.js:64:27)
    at Analyzer.load (/Users/donmccurdy/.nvm/versions/node/v4.1.1/lib/node_modules/polymer-cli/node_modules/hydrolysis/lib/analyzer.js:121:32)
    at Analyzer._getDependencies (/Users/donmccurdy/.nvm/versions/node/v4.1.1/lib/node_modules/polymer-cli/node_modules/hydrolysis/lib/analyzer.js:433:25)
    at Analyzer._dependenciesLoadedFor (/Users/donmccurdy/.nvm/versions/node/v4.1.1/lib/node_modules/polymer-cli/node_modules/hydrolysis/lib/analyzer.js:401:25)
    at Analyzer._parseHTML (/Users/donmccurdy/.nvm/versions/node/v4.1.1/lib/node_modules/polymer-cli/node_modules/hydrolysis/lib/analyzer.js:227:50)
    at null._onTimeout (/Users/donmccurdy/.nvm/versions/node/v4.1.1/lib/node_modules/polymer-cli/node_modules/hydrolysis/lib/analyzer.js:125:39)
    at Timer.listOnTimeout (timers.js:89:15)

It looks like relative paths are correct for local development, but not for building the code? I'm using Polymer CLI v0.16.0.

donmccurdy on 26 Oct 2016

Error:(10, 0) Project with path 'com.facebook.yogajni' could not be found in root project 'litho-master'.
Open File

Please Help Me for Above Error

PatelJay017 on 12 Jul 2017

on polymer serve i am getting the link below
http://127.0.0.1:8080
but i want the url as http://localhost:8080
how can i change it?

achuthhadnoor on 7 Nov 2017

👎4

I just installed some updates. Unfortunately I can't exactly recall which and suddenly I couldn't serve my app anymore.
I get Uncaught SyntaxError: Invalid or unexpected token from webcomponents-loader.js.

I then created a completely new polymer-starter-kit application and it has the same error.

Adding type="javascript" in the script tag for webcomponents-loader.js doesn't do anything for me.

Even completely deleting all node_modules and starting from scratch doesn't help. The problem persists.

EDIT:
After deleting all node_modules once more and doing some other magic, it just suddenly started to work again.

xelra on 30 Nov 2017

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.