Tools: Polymer build fails silently with "bundle": true in polymer.json

[dtruffaut]

Description

Polymer does not build if the option "bundle" : true is specified in polymer.json

Unbundled builds remain OK.
But bundled builds fail silently (ex: "bundle": true or "preset": "es6-bundled")

Versions & Environment

• Operating System: Win 7 x64 (Windows seven 64 bits)

C:\Program Files\nodejs\otority>node --version
v8.1.2

C:\Program Files\nodejs\otority>npm --version
5.0.3

C:\Program Files\nodejs\otority>polymer --version
1.3.1

Steps to Reproduce

A simple polymer.json with "bundle": true in the build section

{
  "name": "Otority",
  "entrypoint": "public/index.html",
  "shell": "public/src/my-app/my-app.html",
  "fragments": [
    "public/src/my-contact-list/my-contact-list.html",
    "public/src/my-contact-get/my-contact-get.html",
    "public/src/my-contact-set/my-contact-set.html",
    "public/src/my-tractage/my-tractage.html",
    "public/src/my-collage/my-collage.html"
  ],
  "sources": [
    "public/**/*",
    "public/fonts/**/*",
    "public/js/**/*",
    "public/images/**/*",
    "bower.json"
  ],
  "extraDependencies": [
    "public/manifest.json",
    "public/firebase-messaging-sw.js",
    "public/bower_components/webcomponentsjs/webcomponents-lite.js"
  ],
  "lint": {
    "rules": ["polymer-2-hybrid"],
    "ignoreWarnings": []
  },
  "builds": [
    {
      "name": "bundled",
      "bundle": true
    }
  ]
}

Expected Results

C:\Program Files\nodejs\otority>polymer build
info:    Clearing build\ directory...
info:    (bundled) Building...

C:\Program Files\nodejs\otority>

=> A bundled version is created

Actual Results

C:\Program Files\nodejs\otority>polymer build
info:    Clearing build\ directory...

C:\Program Files\nodejs\otority>

=> no bundled version created

You might observe that actual results do not show the line : "info: (bundled) Building...", meaning something goes wrong.

Here is the verbose stuff :

C:\Program Files\nodejs\otority>polymer build --verbose
debug:   got args:
{ args: [ 'build', '--verbose' ] }
debug:   got default config from polymer.json file:
{ config:
   { name: 'Otority',
     entrypoint: 'public/index.html',
     shell: 'public/src/my-app/my-app.html',
     fragments:
      [ 'public/src/my-contact-list/my-contact-list.html',
        'public/src/my-contact-get/my-contact-get.html',
        'public/src/my-contact-set/my-contact-set.html',
        'public/src/my-tractage/my-tractage.html',
        'public/src/my-collage/my-collage.html' ],
     sources:
      [ 'public/**/*',
        'public/fonts/**/*',
        'public/js/**/*',
        'public/images/**/*',
        'bower.json' ],
     extraDependencies:
      [ 'public/manifest.json',
        'public/firebase-messaging-sw.js',
        'public/bower_components/webcomponentsjs/webcomponents-lite.js' ],
     lint: { rules: [ 'polymer-2-hybrid' ], ignoreWarnings: [] },
     builds: [ { name: 'bundled', bundle: true } ] } }
debug:   adding command analyze
debug:   adding command build
debug:   adding command help
debug:   adding command init
debug:   adding command install
debug:   adding command lint
debug:   adding command serve
debug:   adding command test
debug:   running...
debug:   command 'build' found, parsing command args:
{ args: [ '--verbose' ] }
debug:   command options parsed from args:
{ verbose: true }
debug:   final project configuration generated:
{ lint: { rules: [ 'polymer-2-hybrid' ], ignoreWarnings: [] },
  root: 'C:\\Program Files\\nodejs\\otority',
  entrypoint: 'C:\\Program Files\\nodejs\\otority\\public\\index.html',
  shell: 'C:\\Program Files\\nodejs\\otority\\public\\src\\my-app\\my-app.html',
  fragments:
   [ 'C:\\Program Files\\nodejs\\otority\\public\\src\\my-contact-list\\my-contact-list.html',
     'C:\\Program Files\\nodejs\\otority\\public\\src\\my-contact-get\\my-contact-get.html',
     'C:\\Program Files\\nodejs\\otority\\public\\src\\my-contact-set\\my-contact-set.html',
     'C:\\Program Files\\nodejs\\otority\\public\\src\\my-tractage\\my-tractage.html',
     'C:\\Program Files\\nodejs\\otority\\public\\src\\my-collage\\my-collage.html' ],
  extraDependencies:
   [ 'C:\\Program Files\\nodejs\\otority\\public\\manifest.json',
     'C:\\Program Files\\nodejs\\otority\\public\\firebase-messaging-sw.js',
     'C:\\Program Files\\nodejs\\otority\\public\\bower_components\\webcomponentsjs\\webcomponents-lite.js',
     'C:\\Program Files\\nodejs\\otority\\bower_components\\webcomponentsjs\\*.js' ],
  sources:
   [ 'C:\\Program Files\\nodejs\\otority\\public\\**\\*',
     'C:\\Program Files\\nodejs\\otority\\public\\fonts\\**\\*',
     'C:\\Program Files\\nodejs\\otority\\public\\js\\**\\*',
     'C:\\Program Files\\nodejs\\otority\\public\\images\\**\\*',
     'C:\\Program Files\\nodejs\\otority\\bower.json',
     'C:\\Program Files\\nodejs\\otority\\public\\index.html',
     'C:\\Program Files\\nodejs\\otority\\public\\src\\my-app\\my-app.html',
     'C:\\Program Files\\nodejs\\otority\\public\\src\\my-contact-list\\my-contact-list.html',
     'C:\\Program Files\\nodejs\\otority\\public\\src\\my-contact-get\\my-contact-get.html',
     'C:\\Program Files\\nodejs\\otority\\public\\src\\my-contact-set\\my-contact-set.html',
     'C:\\Program Files\\nodejs\\otority\\public\\src\\my-tractage\\my-tractage.html',
     'C:\\Program Files\\nodejs\\otority\\public\\src\\my-collage\\my-collage.html' ],
  allFragments:
   [ 'C:\\Program Files\\nodejs\\otority\\public\\src\\my-app\\my-app.html',
     'C:\\Program Files\\nodejs\\otority\\public\\src\\my-contact-list\\my-contact-list.html',
     'C:\\Program Files\\nodejs\\otority\\public\\src\\my-contact-get\\my-contact-get.html',
     'C:\\Program Files\\nodejs\\otority\\public\\src\\my-contact-set\\my-contact-set.html',
     'C:\\Program Files\\nodejs\\otority\\public\\src\\my-tractage\\my-tractage.html',
     'C:\\Program Files\\nodejs\\otority\\public\\src\\my-collage\\my-collage.html' ],
  builds: [ { name: 'bundled', bundle: true } ] }
debug:   Running command...
info:    Clearing build\ directory...
debug:   "build\bundled": Building with options:
{ name: 'bundled', bundle: true }

C:\Program Files\nodejs\otority>

=> and again, no bundled version created

Next steps ?

Tell me if you need the app code to debug.

[shawnbiesan]

This happens to me when I have an HTML import that isn't resolving (missing html file, etc.) Could that be the case?

[dtruffaut]

I wrote a small script that recursively explores all html files to find imports, and in html imports find other html imports... etc. No error is thrown. Declared html imports are all present on disk.

[merlinnot]

Does the linter (polymer lint) throw some errors?

[dtruffaut]

Well it depends.
My project is architectured like this :

- functions
- node_modules
- public
   - bower_components
   - build
   - fonts
   - images
   - js
   - src

If I run polymer lint at the top I get lots of errors from functions, node_modules, bower_components, ...etc.

The complete list of 381 errors 23 warnings can be found here :
https://pastebin.com/KquNSytA

But if I run polymer lint in the public/ directory I get no error.

I copied the same polymer.json in both root and public/ directories, excepted the one in public/ directory has -of course- no public/ affix in path names.

In the root version (the one that triggers lots of errors), if you exclude functions and node_modules errors and you focus on polymer (start at line 38), we can see things like :

public/bower_components/async/support/sync-package-managers.js(0,0) error [parse-error] - Unexpected character '#'

            res = {...what[which], ...res}; // Respect prototype priority
                   ~
public/bower_components/polymer-redux/src/index.js(106,10) error [parse-error] - Unexpected token ...

Meaning the linter does not understand the spread operator from the Async component used by the Redux component for Polymer 2.

How can I manage this ?

--

You can also things like this (99% of the errors) :

<link rel=import href=/bower_components/polymer/polymer-element.html>
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

public/index.html(46,22) error [could-not-load] - Unable to load import: ENOENT: no such file or directory, open 'C:\Program Files\nodejs\otority\bower_components\polymer\polymer-element.html'

<link async rel=import href=/src/my-app/my-app.html>
                            ~~~~~~~~~~~~~~~~~~~~~~~

public/index.html(52,28) error [could-not-load] - Unable to load import: ENOENT: no such file or directory, open 'C:\Program Files\nodejs\otority\src\my-app\my-app.html'

<script defer src=/js/redux.min.js></script>
                  ~~~~~~~~~~~~~~~~

public/index.html(189,18) error [could-not-load] - Unable to load import: ENOENT: no such file or directory, open 'C:\Program Files\nodejs\otority\js\redux.min.js'

Meaning polymer lint does not understand that he has to explore things from the public/ directory ('C:\Program Files\nodejs\otority\public) and not from the root ('C:\Program Files\nodejs\otority).

So shawnbiesan might be right, from the linter point of view.

Is there a directive to set up that in polymer.json ?
Like a 'root' directive or something approaching ?

I tried polymer lint --root public/ but it ends has the same that if I run polymer lint in public/ => no error is raised.

--

And finally you can also see errors like this :

  class SpecialStyle extends HTMLStyleElement {
                             ~~~~~~~~~~~~~~~~

public/bower_components/webcomponentsjs/tests/imports/a1-define.html(23,29) warning [unknown-superclass] - Unable to resolve superclass HTMLStyleElement

I really don't know what to do with this.

[shawnbiesan]

Are you doing absolute pathing for html imports/scripts? "link rel=import href=/bower_components/polymer/polymer-element.html" leads me to believe that maybe you are. If so can you try swapping it to relative?

[merlinnot]

The errors for

<link rel=import href=/bower_components/polymer/polymer-element.html>

are probably the reason. You have to use relative paths:

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

[dtruffaut]

I've done that (with bower_components, /bower_components, ../bower_components and ../../bower_components) but basically it ends the same way :

Polymer lint try to get the project in the otority/ directory but the polymer project is located in otority/public/ so it does not work :'(

If, in the otority/ directory (which is my root), I create a polymer.json like this :

{
  "name": "Otority",
  "root":"public",
  "entrypoint": "index.html",
  "shell": "src/my-app/my-app.html",
  "fragments": [
    "src/my-contact-list/my-contact-list.html",
    "src/my-contact-get/my-contact-get.html",
    "src/my-contact-set/my-contact-set.html",
    "src/my-tractage/my-tractage.html",
    "src/my-collage/my-collage.html"
  ],
  "sources": [
    "**/*",
    "fonts/**/*",
    "js/**/*",
    "images/**/*"
  ],
  "extraDependencies": [
    "manifest.json",
    "firebase-messaging-sw.js",
    "bower_components/webcomponentsjs/webcomponents-lite.js"
  ],
  "lint": {
    "rules": ["polymer-2-hybrid"],
    "ignoreWarnings": []
  },
  "builds": [
    {
      "name": "bundled",
      "bundle": true
    }
  ]
}

with "root" : "public" and paths without public/
and if in otority/ I run polymer lint, no error is thrown.

If next I run polymer build, the same thing happens as earlier, it creates a build/ directory in otority/, and in this otority/build/ directory I only find a polymer.json file, similar to mine but slighly changed by the polymer build command. And nothing else. That build/ directory is nearly empty.

If you wanna try things, the project is available here for 30 days :
http://dl.free.fr/rOOy1xkgU

[merlinnot]

Could you please create some repo?

[web-padawan]

@dtruffaut I looked into your code and I am just curious about several things:

1. Why are you avoiding quotes in HTML attributes? They should be there, even if this doesn't bresk build, it might sill break syntax highlighting.

2. Why are you using <link async rel=import for fragments? It might not work this way when building, consider using lazy-imports instead or call importHref manually.

3. Why are you importing polymer-element separately from index.html? It only should be imported from shell, fragments etc, but having duplicate import here would result in errors.

Please start with deleting async attributes, that silent fail should be related to this.

And finally, my last question: did you really develop whole app before having configured build pipeline?
In the project I'm working on, we started from scratch more than year ago with writing our gulpfile (and it took neary a week, huh). By that time polymer-cli was under development.

BTW, having the similar project structure (index.html not in the project root) we also have some of the polymer lint issues, but IMO this tool is still too raw to use in CI for apps (while being OK for elements).

[dtruffaut]

Ahaha don't comment the code quality I'm just giving a try to polymer so it's a little bit ugly. I work on it on free time. Currently it is a soup of polymer 1.0 -> 2.0 + redux + firebase + indexeddb, used to manage an iron-list of contacts.

1. Quotes are optional in html (for common characters) so I found myself 99% of the time to not need them. Syntax highlighting is perfectly handled with editors like visual studio code.

2. Async because two things :
   a) Lazy imports seems to not be maintained anymore, no 2.0 branch visible
   b) importHref loads fragments only when you need them... But if you go offline suddently when you are on the first page for example, you won't be able to download the next fragment with importHref (cause you are offline). With async, even if is the first time you open the app, fragments are downloaded "in background" so when you go offline there are accessible. Take a look at the code of polymer-shop, they made the choice to download fragments with async. Let's call it a "multiple preload" trick.

3. In theory duplicate imports must not be a problem if imported multiple times, and only for performance reasons they should be merged at build.

I'll give a try to your suggestions.
I'm really out of solutions right now.

In last resort, I might also try this recipe to take control of the build process :
https://medium.com/dev-channel/how-to-use-polymer-with-webpack-b41812d78b15

[web-padawan]

@dtruffaut just tried out bundling a project with async attribute on <link> elements.

1. if file is imported in a such a way but is not a fragment, it just gets bundled into fragment (or shell) which imports it (and so not being loaded lazily).

2. If file is imported like this and is a fragment, it gets placed into separate file like it should be, and the link remains in the beginning of the shell (from where I imported it).

So my assumption about async attribute seems to be wrong. But regarding lazy-imports, they are supported and have a 2.0.0 release so you could use them.

Regarding duplicate imports, re-declaring custom element would cause the error. So if you import some stuff containing <dom-module> from both index.html and other place (e. g. somewhere in shell or fragment, or CDN) - it will most likely end up with lots of exceptions like this one.

[bennypowers]

I have this same behaviour in my project. Builds successfully run on macOS, fail in precisely this manner on ubuntu.

[justinfagnani]

@bennypowers what version of the CLI do you have?

[bennypowers]

👋 @justinfagnani thanks for replying.

Machine | polymer --version | Result
---|---|---
local mac | 1.5.7 | 👍🏻
ci server ubuntu | 1.5.4 | 😟
coworker's ubuntu laptop | 1.5.7 | 😟
coworker's windows laptop | 1.4.1 | 😟

[bennypowers]

I suspect that my issue may be related to components in bower.json which are located in private repositories. CI server, local dev machines all have ssh access to those repositories. Perhaps the bundle impl. is only able to get at them when running in my mac's environment?

[usergenic]

@dtruffaut if this issue is still relevant to you and you can provide a link to repo, I may be able to have a look. The pastebin of errors included many things that look like legitimate syntax errors and missing files etc so is hard to evaluate without the code.

@web-padawan Correct, bundler ignores the semantic of <link rel=import async>. Theoretically we could update bundler logic to attempt to group async items with async items etc, but there's nothing in the logic that supports that at the moment.

Side note: lazy-imports definitely work with Polymer 2.0 and are continue to be an important piece of the way bundler interprets how to define the graph and how to separate bundles. It's those url targets which are lazy-import'd which define the basis for fragments, even if not listed in the fragments array in the polymer.json

@bennypowers I'll look into make bundler get noisier about what's making it fail. It should offer some hint of what's going wrong in console, so if it's swallowing the errors I need to fix. Any repro help would be appreciated, but I understand if this is based on private repos that could be tricky.

[kkimdev]

I'm having the same issue on windows 10 wsl Ubuntu. With one .html file and one .js file less than 400 lines together. I can share if it would be helpful for reproducing and fixing the bug.

[thehand]

I'm having same issue, removing all items in "fragments" it worked as expected...

[dimassrio]

Having the same issues, after careful debugging I find out that this happen when I'm doing lazy-import for item that does not exist.

[usergenic]

Thanks for the clues here, everyone. @dimassrio the fact that a lazy-import to an item that doesn't exist causes the build failure gives me a great lead for addressing this in bundler.

[daniele-orlando]

Same here.

polymer-cli: 1.7 and 1.8
Platform: MacOS and Debian

polymer build
produces the expected output with all these flags --js-compile --js-minify --css-minify --html-minify
but fails silently when used with --bundle.

[TrentBrown]

Man. I burned a lot of time with this same issue. Seems like the bundling tool is likely emitting an error that is being swallowed by the polymer build tool that invokes it. Will try to eliminate the warnings reported by "polymer lint" and "eslint" on my code to see if that gets the bundler to work again.

[stale[bot]]

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.