Tools: web-animations-js scripts breaking build with neon-animated-pages

[catiejo]

Description

Versions & Environment

• Polymer CLI: v0.11.1
• node: v4.4.5
• Operating System: Mac (OSX El Capitan)

Steps to Reproduce

1. Create an application project: polymer init application
2. Download neon animations (bower install --save PolymerElements/neon-animation)
3. Add script tag to your element: <link rel="import" href="../../bower_components/neon-animation/neon-animation.html">
4. _Optionally, you can try to add in the <neon-animated-pages> element that I've been working in, but it's not required to reproduce this issue_
5. Build: polymer build
   

   Expected Results

This is supposed to compile. However, just including neon-animation.html seems to throw an error.

Context
I'm trying to build this app.

Actual Results

ERRORS:

info:    Building application...
info:    Generating build/unbundled...
info:    Generating build/bundled...
warn:    Unable to uglify file /Users/catiejopidel/Code/testing/test/testing-app/testing-app_test.html_script_0.js
warn:    Unable to uglify file /Users/catiejopidel/Code/testing/bower_components/marked-element/demo/index.html_script_0.js
warn:    Unable to uglify file /Users/catiejopidel/Code/testing/bower_components/marked-element/test/marked-element.html_script_0.js
warn:    Unable to uglify file /Users/catiejopidel/Code/testing/bower_components/marked-element/test/marked-element.html_script_1.js
warn:    Unable to uglify file /Users/catiejopidel/Code/testing/bower_components/marked-element/test/marked-element.html_script_2.js
warn:    Unable to uglify file /Users/catiejopidel/Code/testing/bower_components/marked-element/test/marked-element.html_script_3.js
warn:    Unable to uglify file /Users/catiejopidel/Code/testing/bower_components/marked-element/test/marked-element.html_script_4.js
warn:    Unable to uglify file /Users/catiejopidel/Code/testing/bower_components/web-component-tester/data/index.html_script_0.js
warn:    Unable to uglify file /Users/catiejopidel/Code/testing/bower_components/web-component-tester/data/index.html_script_2.js
error:   Promise rejection: Error: no resolver found for ../../../../bower_components/web-animations-js/web-animations-next-lite.min.js
error:   Error: no resolver found for ../../../../bower_components/web-animations-js/web-animations-next-lite.min.js
    at FileLoader.request (/usr/local/lib/node_modules/polymer-cli/node_modules/hydrolysis/lib/loader/file-loader.js:70:37)
    at Object.<anonymous> (/usr/local/lib/node_modules/polymer-cli/node_modules/vulcanize/lib/vulcan.js:318:26)
    at Array.map (native)
    at Object.inlineScripts (/usr/local/lib/node_modules/polymer-cli/node_modules/vulcanize/lib/vulcan.js:311:34)
    at Object.<anonymous> (/usr/local/lib/node_modules/polymer-cli/node_modules/vulcanize/lib/vulcan.js:458:21)
    at run (/usr/local/lib/node_modules/polymer-cli/node_modules/hydrolysis/node_modules/babel-polyfill/node_modules/core-js/modules/es6.promise.js:89:22)
    at /usr/local/lib/node_modules/polymer-cli/node_modules/hydrolysis/node_modules/babel-polyfill/node_modules/core-js/modules/es6.promise.js:102:28
    at flush (/usr/local/lib/node_modules/polymer-cli/node_modules/hydrolysis/node_modules/babel-polyfill/node_modules/core-js/modules/_microtask.js:18:9)
    at nextTickCallbackWith0Args (node.js:420:9)
    at process._tickCallback (node.js:349:13)
error:   Promise rejection: Error: no resolver found for ../../../../bower_components/web-animations-js/web-animations-next-lite.min.js
error:   Error: no resolver found for ../../../../bower_components/web-animations-js/web-animations-next-lite.min.js
    at FileLoader.request (/usr/local/lib/node_modules/polymer-cli/node_modules/hydrolysis/lib/loader/file-loader.js:70:37)
    at Object.<anonymous> (/usr/local/lib/node_modules/polymer-cli/node_modules/vulcanize/lib/vulcan.js:318:26)
    at Array.map (native)
    at Object.inlineScripts (/usr/local/lib/node_modules/polymer-cli/node_modules/vulcanize/lib/vulcan.js:311:34)
    at Object.<anonymous> (/usr/local/lib/node_modules/polymer-cli/node_modules/vulcanize/lib/vulcan.js:458:21)
    at run (/usr/local/lib/node_modules/polymer-cli/node_modules/hydrolysis/node_modules/babel-polyfill/node_modules/core-js/modules/es6.promise.js:89:22)
    at /usr/local/lib/node_modules/polymer-cli/node_modules/hydrolysis/node_modules/babel-polyfill/node_modules/core-js/modules/es6.promise.js:102:28
    at flush (/usr/local/lib/node_modules/polymer-cli/node_modules/hydrolysis/node_modules/babel-polyfill/node_modules/core-js/modules/_microtask.js:18:9)
    at nextTickCallbackWith0Args (node.js:420:9)
    at process._tickCallback (node.js:349:13)

Troubleshooting
The four errors shown above all have to do with the same file: web-animations-js/web-animations-next-lite.min.js. I was able to track this error down to the script included in bower_components/neon-animation/web-animations.html. I tried:

• Changing this script to web-animations-next.min.js to see if it was a problem with that script. Unfortunately, this simply changed the error message to '../../../../bower_components/web-animations-js/web-animations-next.min.js`
• Changing the script to web-animations.min.js with the same results as above.
• Copying and pasting an earlier version of the file from github, but the errors did not change.
• Updating web-animations-js as suggested by this Stack Overflow question, but also with no change to the error message.
• Creating an entirely new application (polymer init) and incrementally copying in my code and building to make sure it wasn't just a problem with my project.
  ..* Installing neon animations does not break the build, but including them in the element does. That's probably expected behavior, though?
• I'm wondering if there's a relation between my issue and issue #219; however, my version of the Polymer CLI is newer than the version I think is being discussed there.

Let me know if I can provide anymore information, and thanks for looking into this!

[catiejo]

I should also add that serving the application works like a charm; it's just polymer build that seems to be the problem.

[jay8t6]

+1

[FredKSchott]

Looking into this now... thanks for the clear reproduction steps!

[yasinMF]

Hey, I just came across exactly the same problem - was able to solve it by adding a polymer.json file to the root directory. Something like this...

{ "entrypoint": "index.html", "shell": "src/my-app.html", "fragments": [ "src/some-component.html" ... ] }

No idea why this fixes it, but it seems to work :/

[oneezy]

Similar issues on this end. I'm able to serve the app locally and everything works fine. But $ polymer build produces a problem.

---

OS: Windows 10 (64-bit)
Git SCM: 2.7.0 (MINGW64)
Node: 6.3.0
Polymer-CLI: 0.12.0

---

Oneeezy@Oneezy MINGW64 ~/Desktop/www_/_clients/diesel/wwwSFI (default)
$ polymer build

info:    Building application...
info:    Generating build/unbundled...
info:    Generating build/bundled...

warn:    Unable to uglify file C:\Users\Oneeezy\Desktop\www_\_clients\diesel\wwwSFI\bower_components\marked-element\demo\index.html_script_0.js
warn:    Unable to uglify file C:\Users\Oneeezy\Desktop\www_\_clients\diesel\wwwSFI\bower_components\marked-element\test\marked-element.html_script_0.js
warn:    Unable to uglify file C:\Users\Oneeezy\Desktop\www_\_clients\diesel\wwwSFI\bower_components\marked-element\test\marked-element.html_script_1.js
warn:    Unable to uglify file C:\Users\Oneeezy\Desktop\www_\_clients\diesel\wwwSFI\bower_components\marked-element\test\marked-element.html_script_2.js
warn:    Unable to uglify file C:\Users\Oneeezy\Desktop\www_\_clients\diesel\wwwSFI\bower_components\marked-element\test\marked-element.html_script_3.js
warn:    Unable to uglify file C:\Users\Oneeezy\Desktop\www_\_clients\diesel\wwwSFI\bower_components\marked-element\test\marked-element.html_script_4.js
warn:    Unable to uglify file C:\Users\Oneeezy\Desktop\www_\_clients\diesel\wwwSFI\bower_components\web-component-tester\data\index.html_script_0.js
warn:    Unable to uglify file C:\Users\Oneeezy\Desktop\www_\_clients\diesel\wwwSFI\bower_components\web-component-tester\data\index.html_script_2.js

info:    Generating service workers...
info:    Build complete!

Oneeezy@Oneezy MINGW64 ~/Desktop/www_/_clients/diesel/wwwSFI (default)

Any ideas?

[FredKSchott]

@catiejojo can you still reproduce /w polymer-cli v0.13.0?

[jay8t6]

@FredKSchott I am getting a bunch of warnings (below) when it tries to uglify the code:
SyntaxError: Unexpected token punc «(», expected punc «:»

All of my elements in the project contain es6 code, I run it through crisper after the build completes. Do you think that may be the reason why its having difficulties uglifying the code? Can the element file not contain es6 code?

[FredKSchott]

@jay8t6 (& @oneezy) Yea that's exactly it, uglify doesn't currently work with es6 code. Do you compile this down via babel anywhere in your build process? Can you run this step before running polymer build?

The polymer-build was just released to help users deal with this by customizing their own build processes, you might want to give that library a look.

[jay8t6]

@FredKSchott Problem is that I had to run crisper to extract the js from html and run babel on it. If I do these two steps, I dont see the point in doing polymer build after that. I wish there is a babel plugin that could crawl through the htmls and do the transpiling for me, so I can run polymer build then.

[catiejo]

@FredKSchott v0.13.0 works like a charm for me! Thank you!

[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.