search

Polymer / tools

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

polymer-cli 1.0.2 build produces wrong output #2452

Open RuslanKim opened 7 years ago

RuslanKim commented 7 years ago

Polymer.json fragment

`"builds": [ { "name": "1.0.0-353", "bundle": true, "addServiceWorker": true, "js": { "minify": true, "compile": false }, "css": { "minify": true }, "html": { "minify": true } } ],

"lint": { "rules": [ "polymer-2" ] } `

if I use "compile": true, than browser cannot find Babel helpers teamatical-app.html:1 Uncaught ReferenceError: babelHelpers is not defined if I use "compile": false, it works well on Chrome only (Edge, Firefox crashes). And even on Chrome it calls "ready" handler on Application component 4 times (on home/index page only).

Dev version (non-built) works well on all these browsers....

Also there are warnings on compilation in bower_components:

`info: Clearing build\ directory...

  class PolymerGenerated extends Base {
                                 ~~~~

lib/polymer/lib/legacy/class.html(136,37) warning [unknown-superclass] - Unable to resolve superclass Base

class TemplateInstanceBase extends base {
                                   ~~~~

lib/polymer/lib/utils/templatize.html(47,39) warning [unknown-superclass] - Unable to resolve superclass base

  let klass = class extends base { }
                            ~~~~

lib/polymer/lib/utils/templatize.html(215,32) warning [unknown-superclass] - Unable to resolve superclass base

        class TemplatizedTemplate extends base {}
                                          ~~~~

lib/polymer/lib/utils/templatize.html(230,46) warning [unknown-superclass] - Unable to resolve superclass base

    let klass = class TemplateInstance extends baseClass {};
                                               ~~~~~~~~~

lib/polymer/lib/utils/templatize.html(415,51) warning [unknown-superclass] - Unable to resolve superclass baseClass

  '_requestOptionsChanged(url, method, params.*, headers, contentType, ' +
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      'body, sync, handleAs, jsonPrefix, withCredentials, timeout, auto)'


lib/iron-ajax/iron-ajax.html(344,6) info [unanalyzable-polymer-expression] - Can only analyze databinding expressions in string literals.
info:    (1.0.0-353) Building...
info:    (1.0.0-353) Build complete!`
FredKSchott commented 7 years ago

Hmm, looks like a bug in the logic that pulls out / dedupes babel helpers. Assigning to @rictic to take a look.

RuslanKim commented 7 years ago

v1.1.0 has the same issue

vlukashov commented 7 years ago

@RuslanKim try adding an entrypoint to your polymer.config. That should solve the issue with Uncaught ReferenceError: babelHelpers is not defined

When it's defined, polymer build injects the babel helpers js code into the entry point of your app (e.g. index.html) to ensure they are defined for anything that's included further on. If you do not tell the polymer build what's your entry point, I am not sure where does it inject babel helpers, and it seems that they are just skipped.

RuslanKim commented 7 years ago

@vlukashov thanks for answer. I don't have 'polymer.config', I have polymer.json:

`{ "entrypoint": "index.html",

"shell": "src/my-app/my-app.html",

"fragments": [ "src/fragments/shop-list.html", "src/fragments/shop-detail.html", "src/fragments/shop-cart.html", "src/fragments/shop-checkout.html", "src/my-app/lazy-resources.html" ],

"builds": [ { "name": "1.0.0-376", "bundle": true, "addServiceWorker": true, "insertPrefetchLinks": false, "addPushManifest": false, "js": { "minify": true, "compile": false }, "css": { "minify": true }, "html": { "minify": true } } ],

"sources": [ "src//*.js", "src/*/.js.map", "src//*.html", "styles//*", "assets/*/", "images//*", "data/*/", ".well-known/*/", "src/my-app/my-app-loader.inner-html", "src/my-app/*.json", "bower.json" ],

"extraDependencies": [ "manifest.json", "lib/webcomponentsjs//*", "lib/custom-elements/*/", "lib/shadydom//*", "lib/shadycss/*/" ],

"lint": { "rules": [ "polymer-2" ] } }`

Entrypoint is my index.html

`<!doctype html>

Initializing ...

`

I cannot find anything about '.config' in Polymer docs except options for activation Polymer. Can you let me know how to fix my case, please?

vlukashov commented 7 years ago

Sorry, it was a typo. I did mean polymer.json, which you've just posted.

According to your polymer.json, you do have an entry point. It's index.html. That's where the polymer CLI's build command will inject babel helpers JS snippet. You should be able to find it if you examine the contents of index.html in the build/1.0.0-376 folder. You should see something like <script>!function(e){var r=e.babelHelpers={};.... there.

The idea is that since it's the entry point of your app, it is loaded before any other HTML imports. So, defining babel helpers there would be enough, and Polymer CLI's build command does just that.

The fact that you see an Uncaught ReferenceError: babelHelpers is not defined error means that the browser evaluates some of the files from the build output before it evaluates index.html. Make sure you actually send the contents of index.html to the client before other build content.

RuslanKim commented 7 years ago

@vlukashov, Thanks. I've got it. I have found them finally. Thanks for help with this part but there are many other issues in output, described upper. ;( Since we have backend-generated page and I don't use index.html actually, I'm trying to use my-app.html as entrypoint it produces babelHelpers inside app HTML - but it runs with many-many errors. Is it a valid way to use application html file as Polymer enterypoint? And event in ES6 mode we have errors actually with Firefox and Edge, in Chrome too but there is unexpected behavior only - I have several calls (4) in app READY event. Is there a fix for this issue? Or is there a way to find diagnosis of an issue? There are still, also:

RuslanKim commented 7 years ago

v1.2:

How often babelHelpers are changing? Can I put it inside backend without risk to broke something in future? @vlukashov

vlukashov commented 7 years ago

@RuslanKim please keep in mind that I have no connection to the Polymer team who maintains this repo or other polymer tools. That is, whatever I write here is non-authoritative.

I would assume that babel helpers are rather stable and would not change, so it's OK to inject them on the backend. They are actually in a separate .js file that's a part of the polymer-build npm package (see node_modules/polymer-build/lib/babel-helpers.min.js). This file is auto-generated when the polymer-build package is built before publishing a new version to npm (see the gen-babel-helpers gulp task). That is, at least the file does not change if you do not change the polymer-cli / polymer-build version that you are using.

I cannot answer any questions related to linting.

Regarding an ES5 version - it should work in IE11 (and if it does not, there should be some errors in the console that would help to debug it), but it is not expected to work in any recent version of Chrome. Chrome needs an ES6 version. If you really want to run the ES5 version in Chrome, make sure you include the Custom Elements ES5 Adapter before including any of the ES5-transpiled code.

ernsheong commented 7 years ago

My understanding is that polymer-cli is meant to be a quick start, any advanced usage would require you to use polymer-build

In this case the errors you see are actually from the babel minifier used here https://github.com/Polymer/polymer-cli/blob/master/src/build/optimize-streams.ts If this is not good enough then I'm afraid we have to write our own polymer-build tasks in the meantime while the CLI remains as it is.

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.