liam-k
commented
2 years ago I tried disabling the imports of that polyfills-es2015 file in StuhlkreisWrapper – didn’t help.
What seems to be happening is that \<digitaler-stuhlkreis/> doesn’t get imported at all, it’s just empty.
According to stackoverflow, this can happen when a "fetch" function is used somewhere in the script, which isn’t available in Safari. There’s also some other stuff that Safari doesn’t support (like some Regex stuff or invalid CSS, apparently Safari doesn’t handle those well), maybe you can check if it’s anywhere in those polyfills you imported? I think those might be the problem since digitaler-stuhlkreis.de works fine in Safari.
Things we should try:
- looking for fetch() functions, invalid CSS Regex Lookbehinds in polyfills and Angular code (especially in places where screenario-stuhlkreis differs from digitaler-stuhlkreis.de)
- importing importing the polyfills via webpack, not in the component, or not importing them at all. Do we even need them? What exactly are you polyfilling? Maybe the polyfills are outdated?
- honestly, there’s tons of stuff you find when you just google "react blank screen safari"... it’s gonna be fun.
https://stackoverflow.com/questions/37116068/react-redux-app-renders-blank-screen-on-safari
s-gbz
Just tested it and unfortunately I can reproduce the error. Seems like an issue with an existing polyfill (last error doesn’t happen in firefox)? Unfortunately I have no idea how to debug your Angular Webcomponent, I guess we should take a day to work on this together sometime.