After bundling application, webcomponents-loader.js is inlined to HTML and application doesn't work in older browsers

[hinok]

Description

Using { bundle: true } or --bundle breaks application in older browsers because code from <script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script> is inlined to html which results runtime error.

It's because code in webcomponents-loader.js

  // global for (1) existence means `WebComponentsReady` will file,
  // (2) WebComponents.ready == true means event has fired.
  window.WebComponents = window.WebComponents || {};
  var name = 'webcomponents-loader.js';
  
  // ...code

  if (polyfills.length) {
    var script = document.querySelector('script[src*="' + name +'"]'); // script = null
    // there is no such <script> tag because it has been inlined

It's clear that this file shouldn't be inlined.

Versions & Environment

• Polymer CLI: 1.5.6
• node: 6.11.3
• Operating System: macOS 10.12.6

Steps to Reproduce

1. polymer init
2. Choose template polymer-2-application
3. Build application by using command

polymer build --js-compile --js-minify --css-minify --bundle

or use this polymer.json

{
  "entrypoint": "index.html",
  "builds": [
    {
      "bundle": true,
      "js": { "minify": true, "compile": true },
      "css": { "minify": true },
      "html": { "minify": true }
    }
  ],
  "lint": {
    "rules": ["polymer-2"]
  }
}

then

polymer build

4. Serve built app

polymer serve build/default

5. Open application http://127.0.0.1:8081

Expected Results

Hello __YOUR__APP__NAME! should be visible.

Actual Results

Blank page and in the console reported errors below

Uncaught TypeError: Cannot read property 'src' of null
(index):309 Uncaught TypeError: Cannot read property 'polyfillWrapFlushCallback' of undefined
(index):426 Uncaught ReferenceError: customElements is not defined
(index):1201 Uncaught TypeError: Cannot read property 'define' of undefined

---

I've tried to use excludes for bundle but still this file is always bundled (inlined) to HTML.

polymer.json

{
  "entrypoint": "index.html",
  "builds": [
    {
      "bundle": {
        "excludes": ["/bower_components/webcomponentsjs/webcomponents-loader.js"]
      },
      "js": { "minify": true, "compile": true },
      "css": { "minify": true },
      "html": { "minify": true }
    }
  ],
  "lint": {
    "rules": ["polymer-2"]
  }
}

Edit: Ahhhh, it seems that files in excludes should NOT have beginning slash...

Probably related:

• Error polyfillWrapFlushCallback thrown after cache deletion on IE 11 polymer#4760

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