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
?
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/**"
],