Polymer 3 with WebPack splitting throws error when used in an Angular application - "Uncaught TypeError: Cannot read property 'bind' of undefined"

[msbasanth]

Hi,

Description

We have a Polymer 3 WebComponents which after bundling comes around 2.5 MB size package. We would like to split the package to multiple chunks, we used WebPack 3 for splitting the packages,

Steps to Reproduce

1. Polymer 3 project
2. Add WebPack 3 for bundling
3. Add multiple entry points and CommonsChunkPlugin as shown below,

   
   module.exports = {
   entry: {
   control_1: path.resolve(__dirname, 'src/control_1.js'),
   control_2: path.resolve(__dirname, 'src/control_2.js'),
   control_3: path.resolve(__dirname, 'src/control_3.js')
   }

4. Added CommonsChunkPlugin for splitting Polymer package to give an additional vendor.js which is common across all entry files.

new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: ({ resource }) => ( resource !== undefined && resource.indexOf('node_modules') !== -1 ) })

5. We are able to use the controls by including both vendor.js and controls.js with `polymer serve`.

This is how I included the Polymer 3 packages in Angular 8 application,

#### Expected Results
Able to use the created Polymer 3 package in Angular application without any issues.

#### Actual Results
The same package when I included in an Angular 8 application it started throwing error,

bootstrap:142 Uncaught TypeError: Cannot read property 'bind' of undefined at bootstrap:142 at bootstrap:150 (anonymous) @ bootstrap:142 (anonymous) @ bootstrap:150 polyfills.js:1 Uncaught TypeError: (intermediate value)(intermediate value).push is not a function at polyfills.js:1

### Browsers Affected
<!-- Check all that apply -->
- [X ] Chrome
- [ X] Firefox
- [X ] Edge
- [ ] Safari 11
- [ ] Safari 10
- [X ] IE 11

### Versions

"@polymer/polymer": "^3.1.0",
Polymer --version gives 1.9.11
-- @webcomponents/webcomponentsjs@2.0.3

If we are not splitting the package loads fine and we could use the controls.
What could be the problem with which I am unable to include Polymer 3 package which is splitted with WebPack 3?

Regards
Basanth

[web-padawan]

Polymer is not supposed to be split that way (into "vendor" chunk).

1. it's a true dependency of the components (not a peer-dependency like react-dom)
2. it's modular, so the components might import some modules, not the whole library

With webpack 4, we recommend to use import() for per-route code splitting. Check out the webpack config preset by Open WC for a working config.

[msbasanth]

Thanks @web-padawan

Thanks for the clarification I will look into per-route code splitting.