Unable to get property 'isProxied' of undefined or null reference

[Aaron-Sterling]

Stencil version:

 @stencil/core@1.0.6
@Stencil/router 1.0.1

I'm submitting a:

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

Current behavior:

Probably related to #1516. stencil build --es5 when using Ionic components builds, but then when served produces the error in the console: "Unhandled promise rejection TypeError: Unable to get property 'isProxied' of undefined or null reference"

Expected behavior:

For the PWA toolkit to load in both dev and prod builds.

Steps to reproduce:

The following code is causing the issue, copypasted from the pwa toolkit. Without it, the page renders fine. Please note I am using lite-server, not the Stencil dev server, because I cannot get that to work right now (reported under separate issue).

Related code:

    return [
      <ion-header>
        <ion-toolbar color="primary">
          <ion-title>Home</ion-title>
        </ion-toolbar>
      </ion-header>,

      <ion-content class="ion-padding">
        <p>
          Welcome to the PWA Toolkit. You can use this starter to build entire
          apps with web components using Stencil and ionic/core! Check out the
          README for everything that comes in this starter out of the box and
          check out our docs on <a href="https://stenciljs.com">stenciljs.com</a> to get started.
        </p>

        <ion-button href="/profile/ionic" expand="block">Profile page</ion-button>
      </ion-content>
    ];
  }

Other information:

[d0whc3r]

I get the same error but using npm init stencil (choose app) when I run the app inside a webview in android/iOS emulator/phone and nothing is loaded in webpage I tested in version 1.3.3 and 1.4.0

[meriturva]

Same here with "@ionic/angular": "4.9.0" . On Safari, sometimes, we have that issue reported on first load page,

[rieshy]

I am having similar issue with the production build. "p-584446de.js:1 Uncaught (in promise) TypeError: Cannot read property 'isProxied' of undefined". Browser: Version 77.0.3865.90 (Official Build) (64-bit) @stencil/core: "1.7.1" @ionic/core": "4.11.1"

[warapitiya]

Anyone? Any idea what's this?

Having the same issue.

Browser: Microsoft Edge Stencil version: @stencil/core - v1.7.5

Update

I think I found out the issue with Microsoft Edge. Dynamic Imports is not supported by Edge at the moment.

Since stencil uses dynamic imports to load module this will break on Edge?

As a workaround, we can only run nomodule script on Edge.

[rieshy]

In my case the issue was because I name custom property in one of my components as "mode". It was conflicting with the system "mode" only in production build. After renaming my property, it worked fine.

[warapitiya]

@rieshy Thanks.

Adding to my comment https://github.com/ionic-team/stencil/issues/1661#issuecomment-550973446

After @rieshy 's comment, I went back to investigate this and realize this is happening because of an internal module we use. Basically the module we use a common.js module written in ES6. I simply imported the ES5 version of it to fix the issue.

[JimGaleForce]

This happens EVERY time I update to a new version (package.json) of my app (same version of stenciljs and ionic). I am forced to shift-click the refresh on browsers to grab the latest and get the update. However, that's much harder on Android, especially in a PWA. On the mobile-browser, I can USB debug and force-refresh, but the PWA doesn't respond the same way. Flushing the cache and even uninstalling doesn't help. I'd hate to resort to losing all the data associated with the app, if that's an answer. Any progress on this outside of the ES5/ES6 issue? (This is on Chrome 79 official build)

[havard024]

I'm seeing this in our error logs, mostly for Safari mobile and desktop

Unhandled Promise rejection: undefined is not an object (evaluating 's.isProxied') ; Zone: <root> ; Task: Promise.then ; Value: TypeError: undefined is not an object (evaluating 's.isProxied') https://reg.nmfsport.no/main-es2015.7e8c73670f88707e9877.js:1:543336
asyncFunctionResume@[native code]
[native code]
promiseReactionJobWithoutPromise@[native code]
arguments: ["Unhandled Promise rejection:","undefined is not an object (evaluating 's.isProxied')","; Zone:","<root>","; Task:","Promise.then","; Value:",{"message":"undefined is not an object (evaluating 's.isProxied')","name":"TypeError","stack":"https://reg.nmfsport.no/main-es2015.7e8c73670f88707e9877.js:1:543336\nasyncFunctionResume@[native code]\n[native code]\npromiseReactionJobWithoutPromise@[native code]"},"https://reg.nmfsport.no/main-es2015.7e8c73670f88707e9877.js:1:543336\nasyncFunctionResume@[native code]\n[native code]\npromiseReactionJobWithoutPromise@[native code]"]

Right before the above issue, I'm getting a ChunkLoadError

ChunkLoadError: Loading chunk 23 failed.
(error: https://reg.nmfsport.no/23-es2015.b2692ba11bdd7cf4ae9d.js)
arguments: [{"type":"error","message":"Loading chunk 23 failed.\n(error: https://reg.nmfsport.no/23-es2015.b2692ba11bdd7cf4ae9d.js)","request":"https://reg.nmfsport.no/23-es2015.b2692ba11bdd7cf4ae9d.js","name":"ChunkLoadError","stack":"https://reg.nmfsport.no/runtime-es2015.6ff13867bdaff58bcbc5.js:1:2625\nmap@[native code]\ni@https://reg.nmfsport.no/main-es2015.7e8c73670f88707e9877.js:1:743574\nCe@https://reg.nmfsport.no/main-es2015.7e8c73670f88707e9877.js:1:546113\nhttps://reg.nmfsport.no/main-es2015.7e8c73670f88707e9877.js:1:543295\nasyncFunctionResume@[native code]\nrun@https://reg.nmfsport.no/polyfills-es2015.e3ac6f83193c0d66e135.js:1:2112\nhttps://reg.nmfsport.no/polyfills-es2015.e3ac6f83193c0d66e135.js:1:13041\nrunTask@https://reg.nmfsport.no/polyfills-es2015.e3ac6f83193c0d66e135.js:1:2731\nm@https://reg.nmfsport.no/polyfills-es2015.e3ac6f83193c0d66e135.js:1:9313\ninvokeTask@https://reg.nmfsport.no/polyfills-es2015.e3ac6f83193c0d66e135.js:1:8392\np@https://reg.nmfsport.no/polyfills-es2015.e3ac6f83193c0d66e135.js:1:20651\nf@https://reg.nmfsport.no/polyfills-es2015.e3ac6f83193c0d66e135.js:1:20891"}]

I've recently tried to add service worker to fix the issue, but our users are still experiencing this issue everytime we update the webpage.

Just for reference, a collection of ChunkLoadError for different cases https://www.xspdf.com/resolution/50977695.html

[ali-master]

Ionic Team, why you don't fix these critical issues that affected our products? I have the same issue and We used the Ionic react version in our PWA banking project.

[andersonfvrj]

I my case, I was having the same issue and after some tests, I found a solution.

I openned the index.html file at www folder and change the line <base href="/" /> to <base href="exatamente" />

You need to add some text in href, it can not be empty or with spaces

[pwespi]

For me the solution was to completely remove the www directory before building the app.

"devDependencies": {
    "@ionic/core": "^5.3.2",
    "@stencil/core": "^2.0.1"
  }

[dutscher]

for us it was a problem with http2. only for your informations 👍 cheers

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Stencil, please create a new issue and ensure the template is fully filled out.

Thank you for using Stencil!