Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unhandled Promise rejection: Cannot set property shadowRoot of [object Object] which has only a getter #571

Closed
Aaron-Sterling opened this issue Feb 24, 2018 · 7 comments
Assignees

Comments

@Aaron-Sterling
Copy link

Stencil version:

 @stencil/core@ 0.6.6 and earlier

I'm submitting a:

[ x ] bug report
[ ] feature request

Current behavior:
Component works fine in Ionic Serve, but renders blank in Android emulator and on Android devices. Android remote debugging displays the error: Unhandled Promise rejection: Cannot set property shadowRoot of [object Object] which has only a getter ; Zone: ; Task: Promise.then ; Value: TypeError: Cannot set property shadowRoot of [object Object] which has only a getter.

Expected behavior:
To render on emulator/device as it does during Ionic Serve

Steps to reproduce:
Component is here. I've produced and reproduced the error by creating an Ionic Start Blank project, and using the component once in the home page.

Other information:
Google search shows a similar error happening when Angular was doing something incompatible with zone.js. Full stack trace of my error here:
Unhandled Promise rejection: Cannot set property shadowRoot of [object Object] which has only a getter ; Zone: ; Task: Promise.then ; Value: TypeError: Cannot set property shadowRoot of [object Object] which has only a getter
at Object.C (file:///android_asset/www/build/time-ago/time-ago.qojf4dag.js:83:15873)
at file:///android_asset/www/build/time-ago/time-ago.qojf4dag.js:83:4974
at i (file:///android_asset/www/build/time-ago/time-ago.qojf4dag.js:83:16541)
at t.invoke (file:///android_asset/www/build/polyfills.js:3:14976)
at r.run (file:///android_asset/www/build/polyfills.js:3:10143)
at file:///android_asset/www/build/polyfills.js:3:20242
at t.invokeTask (file:///android_asset/www/build/polyfills.js:3:15660)
at r.runTask (file:///android_asset/www/build/polyfills.js:3:10834)
at o (file:///android_asset/www/build/polyfills.js:3:7894) TypeError: Cannot set property shadowRoot of [object Object] which has only a getter
at Object.C (file:///android_asset/www/build/time-ago/time-ago.qojf4dag.js:83:15873)
at file:///android_asset/www/build/time-ago/time-ago.qojf4dag.js:83:4974
at i (file:///android_asset/www/build/time-ago/time-ago.qojf4dag.js:83:16541)
at t.invoke (file:///android_asset/www/build/polyfills.js:3:14976)
at r.run (file:///android_asset/www/build/polyfills.js:3:10143)
at file:///android_asset/www/build/polyfills.js:3:20242
at t.invokeTask (file:///android_asset/www/build/polyfills.js:3:15660)
at r.runTask (file:///android_asset/www/build/polyfills.js:3:10834)
at o (file:///android_asset/www/build/polyfills.js:3:7894)n.onUnhandledError @ polyfills.js:3

@jgw96
Copy link
Contributor

jgw96 commented Feb 26, 2018

@Aaron-Sterling Thanks for opening an issue with us! So just to be clear that I'm understanding, this is only happening with components that use shadow dom being used in Cordova right? I'm gonna start looking into that use case, but just want to be double sure I'm understanding.

@Aaron-Sterling
Copy link
Author

Aaron-Sterling commented Feb 26, 2018

I didn't explicitly set shadow to true. I built with --prod --prerender and --es5. And yes, it only seems to show up in Cordova. I got the error I copypasted with ionic cordova emulate android, even though ionic serve worked fine.

Edit: one possible source of trouble might be the use of setTimeout inside the component. It seemed simple at the time, but now that I type this I wonder if that is causing a zone issue.

@Aaron-Sterling
Copy link
Author

@jgw96 Bumping this because it's almost a week old and I noticed the needs info tag was still on. Is there something more I can provide you? Please let me know. I've stopped publishing Stencil components to npm because of this.

@jgw96 jgw96 added bug and removed needs info labels Mar 5, 2018
@jgw96
Copy link
Contributor

jgw96 commented Mar 5, 2018

Hey @Aaron-Sterling , sorry about the delay on this, I will confirm this issue today. As a temp workaround, you can use scoped: true instead of shadow dom. This will give you the same style encapsulation but done in a more manual way by Stencil.

@jgw96
Copy link
Contributor

jgw96 commented Mar 5, 2018

So i can confirm that a simple component using shadow dom in a stencil app works fine in cordova on my Pixel. With that test working fine, this is looking more like an Angular related issue.

@jgw96
Copy link
Contributor

jgw96 commented Mar 5, 2018

Alright @Aaron-Sterling so with an ionic-angular v4 project i use internally for testing I can confirm that shadow dom components work fine. Also, in ionic-angular v4 we are disabling zone in all of our components which would avoid any potential zone issues. So for now you will have to work around this issue with ionic-angular v3, but it will be solved in v4. Thanks!

@jgw96 jgw96 closed this as completed Mar 5, 2018
@Aaron-Sterling
Copy link
Author

Thanks very much for looking into this. I'm not sure I understand what you wrote though, sorry. Two questions please:

(1) I don't use shadow: true inside any decorator. So maybe my use of setTimeout was the problem? Everything else is arithmetic or string concatenation.

(2) The problem is due to the use of the component inside ionic-angular 3? I haven't tried using it inside pure Angular, but I will, if that's the situation. Also, by workaround, you mean using scoped: true? If so, I'll start testing tomorrow.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants