Chrome 80 polymer TypeError: Cannot read property 'proto' of null

Question

My Chrome is updated to Chrome 80 version.Then My site doesnot work gives below error:
My app use Angular 5,

My bower.json: "webcomponentsjs": "webcomponents/webcomponentsjs#0.7.0",

" vendor.bundle.js:65175 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'proto' of null TypeError: Cannot read property 'proto' of null at s (webcomponents.min.js:11) at s (webcomponents.min.js:11) at s (webcomponents.min.js:11) at s (webcomponents.min.js:11) at T (webcomponents.min.js:11) at Function.C [as wrap] (webcomponents.min.js:11) at new DomApi (polymer-mini.html.js:645) at Function.DomApi.factory (polymer-mini.html.js:739) at Function.Polymer.dom (polymer-mini.html.js:751) at l.toggleClass (polymer.html.js:1191) at resolvePromise (polyfills.bundle.js:5300) at resolvePromise (polyfills.bundle.js:5257) at polyfills.bundle.js:5359 at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.bundle.js:4907)"

Please help me

Silvers · Accepted Answer · 2020-02-10 21:27:42Z

1

Web Components v0 API was removed in Chrome m80: https://developers.google.com/web/updates/2019/12/chrome-80-deps-rems#web_components_v0_removed

If you are using Polymer 2.0 Elements in your Angular App you need HTML Imports to import those elements into your Application but the HTML Imports support was also removed: https://www.chromestatus.com/feature/5144752345317376

You should be able to still use them with the help of polyfills for HTML Imports which are provided by the webcomponents.js package https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs

It looks like this package isn't properly bundled with your webpack configuration, so I would look there to fix your issue.

You could try those 2 options:

Option 1: npm + webpack

npm install @webcomponents/webcomponentsjs
Use CopyWebpackPlugin to copy the file you need out of node_modules into where your webpack output folder will be
Update index.html with the output path used in step 2

Option 2: UNPKG

Add https://unpkg.com/@webcomponents/[email protected]/webcomponents-bundle.js to the of your index.html

I would start with the option 2.

https://github.com/webcomponents/polyfills/issues/63#issuecomment-412302377

edited Feb 10, 2020 at 21:27

answered Feb 10, 2020 at 18:04

Silvers

322 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Muhammed şahsuvaroğlu Over a year ago

do you have any sample for webcomponentjs to bundle by webpack

Silvers Over a year ago

You could try one of those 2 approach: github.com/webcomponents/polyfills/issues/…

Collectives™ on Stack Overflow

Chrome 80 polymer TypeError: Cannot read property 'proto' of null

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related