Stencil Exceptions Safari

[danbucholtz]

Stencil version:

 @stencil/core@0.8.0 🐅

Safari Version

Version 11.1 (13605.1.33.1.4)

I'm submitting a:

[x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior: In safari, I am seeing really weird, inconsistent results with Stencil. It is strange because I cannot recreate the situation on stenciljs.com, but I can do it every time from the repository.

Expected behavior: I would expect it to just work consistently. I am having a hard time tracking down the actual issue.

Steps to reproduce:

1. Clone stencil-site repo at latest commit afe72e50ee8b147e2abbc48bb315e86982209e40

2. npm install

3. npm run dev

4. Open safari

5. Navigate around for a bit so you're not at the root url

6. Refresh a few times, navigate a little more. Eventually you'll see the issue.

Here's a video showing the issue.

https://drive.google.com/open?id=1HJZ8Nr4NvA2aV5tCiTJRE5hU2wSyIDwI

The exceptions are generally as follows:

[Error]  (2)
TypeError: Right side of assignment cannot be destructured — chunk-f6f1d593.js:1
"http://localhost:3333/build/app/stencil-route-link.js"
    promiseReactionJob
    appendChild
    executeScript (preload.js:147)
    applyScripts (preload.js:420)
    processCssAndScriptsResponse (preload.js:280)
    responseListener (common-script.js:57)
[Error] ReferenceError: Cannot access uninitialized variable. — app.core.js:2264
    (anonymous function) (app.core.js:2271)
    promiseReactionJob
    appendChild
    executeScript (preload.js:147)
    applyScripts (preload.js:420)
    processCssAndScriptsResponse (preload.js:280)
    responseListener (common-script.js:57)
[Error] ReferenceError: Cannot access uninitialized variable. — app.core.js:2264
    (anonymous function) (app.core.js:2271)
    promiseReactionJob
    appendChild
    executeScript (preload.js:147)
    applyScripts (preload.js:420)
    processCssAndScriptsResponse (preload.js:280)
    responseListener (common-script.js:57)

[manucorporat]

@danbucholtz I have seen this in the past, not sure what is causing it. feels like a bug in Safari, but I can't tell for sure

[danbucholtz]

I can't really tell for sure either 🤠. Is there anything I can do or provide to help? It is really weird because I cannot get a half-way decent stacktrace. Shoot me a msg if you want to hack on it together. I'm happy to help troubleshoot and see if we can figure it out.

Thanks, Dan

[danbucholtz]

@manucorporat,

Oddly enough, this doesn't seem to happen when a site is pre-rendered. Any idea why that would be? I'm at a loss as I have no idea what causes it in the first place 😅 .

Thanks, Dan

[tomtaylor]

I see the same issue, but on every load in Safari. I took the PWA starter kit, removed Ionic, installed Stencil Router, and it triggers the same issue in Safari 11.1.2 (13605.3.8).

I've made a very minimal repo to demonstrate it. Let me know if I can help with debugging it.

[tomtaylor]

FWIW, the build output works fine, as far as I can tell, this is only experienced in dev mode.

[alepop]

I've got the same error in Safari (Version 12.0 (13606.2.11)) wit stencil v0.14 in development mode: TypeError: Right side of assignment cannot be destructured. In production mode, I don't get an error but the application does not work. It happens when I trying to use custom element in another custom element. I saw in network tab that source code file for the nested component is loaded twice.

Update: with --prod flag works fine in Safari.

[balupton]

I'm running into this with the getting started guide...

https://youtu.be/BE9DhirqI1w

[balupton]

So it is

/*! Built with http://stenciljs.com */
const { h } = window.App;

From the generated chunk that causes it.

Serving www from a static server, and editing that file directly and changing const h = window.App.h works (or coincidentally any object like const h = window.App or even const h = {} also works) but only for the initial cold start, but warm starts fail with another error:

[Error]  (2)
TypeError: undefined is not an object (evaluating 'window.App.h') — chunk-2c4f1c37.js:2
"http://localhost:5000/build/app/app-root.entry.js"
    promiseReactionJob

Deleting that line altogether fails on warm starts with:

 TypeError: Right side of assignment cannot be destructured
Module Code — app-root.entry.js:2
evaluate
moduleEvaluation
[native code]
promiseReactionJob

Which points to:

/*! Built with http://stenciljs.com */
const { h } = window.App;

However changing it to const h = window.App.h causes it to fail too:

TypeError: undefined is not an object (evaluating 'window.App.h')
Module Code — app-root.entry.js:2
evaluate
moduleEvaluation
[native code]
promiseReactionJob

The h variable seems to be used for rendering things:

class AppRoot {
  render () {
    return (h("div", null,
      h("header", null,

---

Safari Technical Preview Release 67 (Safari 12.1, WebKit 14607.1.9.0.1) works fine.

---

npx stencil build --prod --watch --serve

works fine, as noted earlier, it maps the line to const {h: t} = window.App; and uses t instead of h

[sammckay10]

Has anyone figured out what's going on here? I have tried setting --prod but unfortunately Safari still only renders the page sometimes

I'm using @stencil/core 0.18.0

[sammckay10]

Has anyone figured out what's going on here? I have tried setting --prod but unfortunately Safari still only renders the page sometimes

I'm using @stencil/core 0.18.0

Update - Turns out it was a problem with TrustPilot...

[cmaas]

I figured out how to reproduce the issue. It happens in Safari all the time and the only reason why Stencil works in Safari at all is because of caching and possibly some kind of different loading behavior if the router is used.

Steps to reproduce:

npm init stencil → select app

Open stencil.config.js and disable the service worker by uncommenting the line serviceWorker: null (because the service worker also caches stuff)

Open app-root.tsx and replace the router-code

<stencil-router>
  <stencil-route-switch scrollTopOffset={0}>
    <stencil-route url='/' component='app-home' exact={true} />
    <stencil-route url='/profile/:name' component='app-profile' />
  </stencil-route-switch>
</stencil-router>

with

<app-home />

Open app-home.tsx and remove the router-related stuff:

<stencil-route-link url='/profile/stencil'>
  <button>
    Profile page
  </button>
</stencil-route-link>

Now build and run the project (prod or devmode doesn't matter, also whether or not it's served from a real webserver or the dev server):

Last step: In Safari, open developer tools, go to Networking tab and disable the cache. Voilà, the Stencil app never loads, because of the error TypeError: undefined is not an object (evaluating 'window.App.h')

I did some more digging. Apparently, Safari downloads app-home.entry.js twice and when it's loaded for the second time, window.App is actually undefined (and the entire window is different). Just place a console.log in app-home.entry.js to see this behavior. In Chrome everything works, because it downloads app-home.entry.js only once, even if the cache is disabled. (To see the original filenames, set hashFileNames: false in stencil.config.js).

The problem boils down to how Stencil loads modules in Safari (or a bug in Safari – I don't know).

A solution would be much appreciated, because Stencil is kind of unstable right now in Safari. It's mostly luck if it works 😉

[manucorporat]

Safari suffered of a some kind of race condition that evaluated the modules before some normal script executed, in stencil one we have completely refactored how {h} is imported by modules and this should not longer be an issue!!

Stencil 1.0 will hit beta in the upcoming weeks!

[balupton]

Stencil 1.0 will hit beta in the upcoming weeks!

Any news on what the changes will be, or a blog we can subscribe to?