Polymer / tools

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

Missing bower components after running polymer build #2215

Open Momoumar opened 8 years ago

Momoumar commented 8 years ago

Description

Versions & Environment

  1. Create an application project: polymer init application
  2. Install the moment.js [http://momentjs.com/] library for instance, using bower install moment --save
  3. Build: polymer build

    Expected Results

The moment.js library should be in build/bundled/bower_components

Actual Results

The moment.js library is not present in build/bundled/bower_components

justinfagnani commented 8 years ago

How are you referencing moment? Third party dependencies are only pulled over if they are referenced so that the analyzer can see it.

Momoumar commented 8 years ago

@justinfagnani <script src="bower_components/moment/moment.js"></script> in the index.html

FredKSchott commented 8 years ago

@Momoumar can you update polymer-cli to latest (v0.14.0) and try again? This should be fixed in the latest version.

Also, for index.html only we reccomend using the absolute URL path ie: /bower_components/moment/moment.js

Momoumar commented 8 years ago

@FredKSchott, I've updated to v0.14.0 but the issue is still present.

FredKSchott commented 8 years ago

@Momoumar and did you change to /bower_components/moment/moment.js in your index.html?

Momoumar commented 8 years ago

@FredKSchott, Yep I did but it remains.

FredKSchott commented 8 years ago

hmm, that's very strange. I still can't reproduce based on your steps in the OP.

Can you run polymer build --verbose and post the full output here? That will help us debug.

dimassrio commented 8 years ago

+1, i'm experiencing same issue, js-cookie and even webcomponent is not loaded to the /bower_components, yet it exist in bower.json on build/bundled,

workaround for now is running bower install on the build/bundled folder so firebase can pick it up.

justinfagnani commented 8 years ago

How are you referencing those files?

antonmoiseev commented 8 years ago

This is reproducible with a freshly generated application template:

  1. polymer init (choose application)
  2. polymer build --entrypoint index.html --shell src/myapp-app/myapp-app.html
  3. polymer serve build/bundled

webcomponentsjs is missing in _build/bundled/bowercomponents, in the browser you see:

image

polymer-cli: 0.14.0

FredKSchott commented 8 years ago

@antonmoiseev thanks for the clear steps, I can reproduce that.

Not sure what's not working here, but for some reason our dependency analyzer is missing that "/bower_components/webcomponentsjs/webcomponents-lite.js" reference in your index.html. A workaround for now is to include it explicitly via the --include-dependencies flag. As an example, this fixes the issue for me:

polymer build --entrypoint index.html --shell src/myapp-app/myapp-app.html --include-dependencies bower_components/webcomponentsjs/webcomponents-lite.js

But yea, we still need to figure out why this isn't working in the first place...

antonmoiseev commented 8 years ago

@FredKSchott do you think it makes sense to add include-dependencies to the polymer.json configuration? It may be useful for projects with dynamically loaded resources like in the shop app.

dasurid commented 8 years ago

I have also been hit this issue. The --include-dependencies flag workaround is a bit unworkable in my case due to the number of dependencies missing in /build/bundled

Has there been any progress into understanding the reason for the problem?

RoXuS commented 8 years ago

+1

It appears that all components which are not loaded from the html are not in the bower_components, true ?

My components in the src folder load lot of components, these components aren't all copied to the bower_components folder. Same issue with the webcomponentsjs (it is loaded with javascript like polymer-shop).

Currently we use a gulp task to copy the missing dependencies...

haltersweb commented 8 years ago

I have experienced the same problem. I submitted a bug yesterday: https://github.com/Polymer/polymer/issues/3882

It includes my steps to reproduce and what my polymer.json file looks like, showing the includeDependencies array. Upon 'polymer build' none of the dependencies are being included in the build folder.

FredKSchott commented 8 years ago

as of v0.16.0 (just pushed out) includeDependencies is supported as a polymer.json property. This doesn't fix @antonmoiseev's root problem, but it is much easier than using the current --include-dependencies flag workaround for each build.

runia1 commented 8 years ago

@FredKSchott also experiencing this bug. Although I may be experiencing something a little different.

Steps to reproduce:

$ polymer init choose empty template ... fill out the form which creates your empty polymer app.

In src/ I am given one El named user-app.

Open this el, inside <template> add <content></content> tags so nested Polymer el's are displayed.

Create a new el in src/ named "my-el" or whatever you want to call it.

At the top do your html imports.

Ex:

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

.
.
.

Go to index.html, change <user-app></user-app> to

<user-app>
    <my-el></my-el>
</user-app>

$ polymer build

Afterwards, build/bundled/bower_components/iron-form/iron-form.html does not exist. Another problem is that it is throwing an error bc i am trying to import polymer in both user-app and my-el. But is this not normal behavior? This is the error: Uncaught NotSupportedError: Failed to execute 'registerElement' on 'Document': Registration failed for type 'dom-module'. A type with that name is already registered

Curiously I can solve the first problem by moving the import statement for iron-form into the user-app el, even though that el isn't the one that uses it at all, for some reason it then gets put in the build/bundled/bower_components directory.

The second problem I can solve by just removing the import statement for polymer from my-el. Again though, I thought all polymer el's should import polymer, not just the base el?

mercmobily commented 7 years ago

Just my 2c... are you sure this is not related to #444? (I have only just filed it)

vtellier commented 7 years ago

I also miss bower_components firebase files when I build.

polymer-cli version: 0.16.0

I moved temporarily my index.html code in to the my-app-html file, I will see how far can I go like so ; but so far no error...

NicolasRannou commented 7 years ago

Are your paths correct in polymer.json? I had some issues some files missing after build and it appeared some of the path in my polymer.json were not correct and the build was failing too quietly for me.

Does it return "Build complete" at the end of the build?

FredKSchott commented 7 years ago

Thanks for all your feedback, everyone. We've been making a ton of improvements to the build process (new analyzer, more straightforward analysis, etc), which will be released in the next version. You can try a pre-release of the new build command with npm install -g polymer-cli@next.

Most of these issues should be solved in this newer version.

mercmobily commented 7 years ago

Thank you Frank!!!

On 15 Dec 2016 9:23 a.m., "Fred K. Schott" notifications@github.com wrote:

Thanks for all your feedback, everyone. We've been making a ton of improvements to the build process (new analyzer, more straightforward analysis, etc), which will be released in the next version. You can try a pre-release of the new build command with npm install -g polymer-cli@next.

Most of these issues should be solved in this newer version.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/Polymer/polymer-cli/issues/347#issuecomment-267209329, or mute the thread https://github.com/notifications/unsubscribe-auth/ACB7XqebF310rh_CFAveMyfF93zxTz6iks5rIJaagaJpZM4JeW4Q .

jifalops commented 7 years ago

@FredKSchott polymer-cli@next fixes missing bower_components, but does not include bower.json in the build directories.

Edit the build directories do not include the src or images dirs either.

Relevant part of polymer.json (using polymer-cli@next):

"sources": [
    "src/**/*",
    "images/**/*",
    "bower.json"
  ],
  "extraDependencies": [
    "manifest.json",
    "bower_components/webcomponentsjs/webcomponents-lite.min.js"
  ]
FredKSchott commented 7 years ago

@jifalops hmm that's not right. I just ran on polymer-starter-kit and src and images are both in the final build directories. Could you try running that as well (polymer init starter-kit in a new directory, and then polymer build)?

adamsrichard commented 7 years ago

@FredKSchott - i'm having the same issue after following all of the above including creating a new directory and running polymer init starter-kit and thenpolymer build

petecarapetyan commented 7 years ago

In case this helps anyone, just ran into the same problem as noted many times above. In my case it was caused by thinking "bower install --save" was all that was required. Fixed the problem by including the page that referenced the missing dependency in the polymer.json file "fragments": [ "src/my-about.html", "src/my-admnuser.html",

like so. Fixed it immediately.

jifalops commented 7 years ago

Edit It seems all of the missing dependencies are explicit imports in my app-shell. testing and reporting back...

(see next comment for results)

Building polymer-starter-kit example does work, but there are two inconsistencies I'm experiencing using the polymer init (application) and my own project.

  1. Starting with a blank polymer application (not the starter kit) and adding app-route via bower i -S polymerelements/app-route. Bower components now contains app-route but not app-location. Weird.

  2. In my own project which uses app-route and app-location, both appear under bower_components/app-route. However when using polymer build, the result contains app-route but not app-location. There are several similar examples preventing me from deploying my project (finally). Any ideas?

jifalops commented 7 years ago

Edit: See solution in later comment It seems to have to do with abosolute/relative paths used for "shell" in polymer.json and the html imports within the shell file. "Absolute" is in the html sense, so "/src/app.html" is absolute and "src/app.html" is relative.

Edit I am using Polymer 1.7.1. I said in an earlier comment I was using polymer#next, I switched back before this little experiment.

Shell path, HTML imports. Result

  1. Absolute, Relative. Build succeeds, but build/bundled/bower_components/app-route/ does not contain app-location.html.
  2. Absolute, Absolute. Build succeeds, but app-location.html is missing (same as before).
  3. Relative, Relative. Build succeeds (some duplicate elements now) and app-location.html is included, but the "shell" file from polymer.json is not included in build/bundled. Edit the files listed as fragments are also not included in build/bundled --- unless their paths are absolute.
  4. Relative, Absolute, Build fails (cannot find polymer.html).

So if the app-shell file defined in polymer.json is "/src/app.html", the HTML imports in app.html are not always included. If the shell file path is relative, then the HTML imports in the shell file must also be relative, but then the app.html file is missing in build/bundled.

ckunta commented 7 years ago

It appears that bower is using app-route from an older repository https://github.com/x-element/app-route instead of https://github.com/PolymerElements/app-route. The x-element missing three components, including app-location. I tried to force it using 'bower install https://github.com/PolymerElements/app-route.git', but it still download it from x-element.

jifalops commented 7 years ago

Update This is no longer required with polymer-cli@next Well I found a process that works for me to solve the relative/absolute path conundrum I wondered into. Summed up a a shell script below.

#!/usr/bin/env bash
# "shell" must be a relative path in polymer.json.            src/app-shell.html
# "fragments" must use an absolute path in polymer.json.      /src/frag-mnt.html
# HTML imports must use relative paths inside the "shell" file.
# Tested with polymer-cli 0.17.0 and polymer 1.7.1.
polymer build
cp src/app-shell.html build/bundled/src/    # copy app shell
cp -rn bower_components build/bundled/      # copy only missing bower components
tonlie commented 7 years ago

After adding

"includeDependencies": [
    "bower_components/webcomponentsjs/webcomponents-lite.min.js"
  ]

to polymer.json the webcomponentsjs file was added to bundled/unbundled builds by polymer build automatically.

Very helpful in regards to firebase hosting and Windows IE/Edge!

ArthurJahn commented 7 years ago

Any updates on this? I'm still facing same issue here... When using a behavior to load sensitive scripts like moment.js or some other components.

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.