Missing bower components after running polymer build

[Momoumar]

Description

Versions & Environment

• Polymer CLI: 0.13
• node: v4.4.7
• Operating System: Mac OSx 10.11.6

Steps to Reproduce

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]

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

[Momoumar]

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

[FredKSchott]

@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]

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

[FredKSchott]

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

[Momoumar]

@FredKSchott, Yep I did but it remains.

[FredKSchott]

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]

+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]

How are you referencing those files?

[antonmoiseev]

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/bower_components, in the browser you see:

polymer-cli: 0.14.0

[FredKSchott]

@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]

@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]

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]

+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]

I have experienced the same problem. I submitted a bug yesterday: Polymer/polymer#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]

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]

@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]

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

[vtellier]

I also miss bower_components firebase files when I build.

• It happens when I include from the index.html (absolute URL or not).
• No problem when I include from my source files.

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]

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]

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]

Thank you Frank!!!

…

On 15 Dec 2016 9:23 a.m., "Fred K. Schott" ***@***.***> 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 ***@***.*** 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]

@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]

@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]

@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 then polymer build

[petecarapetyan]

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]

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]

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]

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]

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]

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]

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]

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.