0

Using polymer-cli 1.7.7, bundling a Polymer 3 app for esm, es6 and es5 support does not output node_modules. As a consequence, dependencies such as @webcomponents/webcomponentsjs are not found when the bundles are served with prpl-server.

Here is a small example for reproduction:

https://github.com/lpellegr/polymer-bundler-bundle-issue

This example is based on the original polymer 3 app template generated by polymer-cli init. The configuration file polymer.json has been edited to generate esm, es6 and es5 bundles as suggested on the following resource:

https://polymer.github.io/pwa-starter-kit/building-and-deploying/

If you run polymer build, the output directory does not contain include a node_modules directory and thus not the JavaScript file for webcomponentjs:

build/
├── es5-bundled
│   ├── index.html
│   ├── push-manifest.json
│   ├── service-worker.js
│   └── src
│       └── _element
│           └── _element.js
├── es6-bundled
│   ├── index.html
│   ├── push-manifest.json
│   ├── service-worker.js
│   └── src
│       └── _element
│           └── _element.js
├── esm-bundled
│   ├── index.html
│   ├── push-manifest.json
│   ├── service-worker.js
│   └── src
│       └── _element
│           └── _element.js
└── polymer.json

If you remove the builds option from polymer.json (thus reverting to the default template), then all looks good, the right node_modules folder is outputted:

build/ └── default
    ├── index.html
    ├── node_modules
    │   ├── @polymer
    │   │   └── polymer
    │   │       ├── lib
    │   │       │   ├── elements
    │   │       │   │   └── dom-module.js
    │   │       │   ├── mixins
    │   │       │   │   ├── element-mixin.js
    │   │       │   │   ├── properties-changed.js
    │   │       │   │   ├── properties-mixin.js
    │   │       │   │   ├── property-accessors.js
    │   │       │   │   ├── property-effects.js
    │   │       │   │   └── template-stamp.js
    │   │       │   └── utils
    │   │       │       ├── async.js
    │   │       │       ├── boot.js
    │   │       │       ├── case-map.js
    │   │       │       ├── html-tag.js
    │   │       │       ├── mixin.js
    │   │       │       ├── path.js
    │   │       │       ├── resolve-url.js
    │   │       │       ├── settings.js
    │   │       │       └── style-gather.js
    │   │       └── polymer-element.js
    │   └── @webcomponents
    │       └── webcomponentsjs
    │           └── webcomponents-loader.js
    └── src
        ├── _element
        │   └── _element.js
        └── test-app
            └── test-app.js

Is there something wrong with my polymer.json? Is it a bug with polymer-bundler?

Laurent
  • 14,122
  • 13
  • 57
  • 89

1 Answers1

1

Your polymer.json file doesn't include the information that the Polymer CLI uses to decide what to include in the build.

Adding the missing lines as per the PWA Starter Kit makes it work, for example:

"entrypoint": "index.html",
"extraDependencies": [
    "node_modules/@webcomponents/webcomponentsjs/**"
],
CaptainCodeman
  • 149
  • 1
  • 3