Unable to get property 'isProxied' of undefined or null reference (like #1661)

DaanVanVugt commented 3 years ago

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:

Original issue watchers: @Aaron-Sterling @d0whc3r @meriturva @rieshy @warapitiya @JimGaleForce @havard024 @ali-master @andersonfvrj @pwespi @dutscher

coconnorco commented 3 years ago

We've been seeing this error too but on @stencil/core: 2.3.0 (we're not using the pwa toolkit). A vast majority of these errors seem to be coming from safari users but intermittently.

DaSchTour commented 3 years ago

I'm getting this error with my published components when trying to load from unpkg. It's very really annoying to have a broken library published and clients waiting for a new version while I have no idea how to fix it. BTW I also have this error in Chrome.

DaSchTour commented 3 years ago

I also discovered, that the generated build and documentation is broken, not matching or missleading. In this documentation https://stenciljs.com/docs/distribution the script tag points to https://cdn.jsdelivr.net/npm/my-name@0.0.1/dist/myname.js

There are two mistakes in this.

There is no file with the library name generated in dist but only an index.js
The index.js then points to an empty file

Here you can check my broken published bundle https://www.jsdelivr.com/package/npm/@footage.one/search-components?path=dist

ajgagnon commented 3 years ago

I've narrowed down this issue to Safari iOS version 12. The only way to fix this is to run a babel rollup plugin (which breaks tests)

leonheess commented 3 years ago

Getting this issue in Chrome while using a Cypress-Test 🤔

splitinfinities commented 2 years ago

Hey folks! Could you please update to the latest version and help me ID if this is intermittent or not? With sourcemaps now shipped in v2.9.0, I hope that folks hitting this can use them to determine where precisely this occurs and why.

gcaven-nbx commented 2 years ago

I'm still seeing this issue on v2.12.0, intermittently and mostly (though not exclusively) with mobile Safari users. Up to and including Safari 15.

andrewlw89 commented 2 years ago

Getting this issue in Chrome while using a Cypress-Test 🤔

Same issue but with Chrome and Testcafe

Clovel commented 2 years ago

I've got this issue on iOS 15 as well. Has anybody found a workaround or a fix ?

FabianEbert commented 2 years ago

I am also interested in a fix/workaround. Using our application in Safari is blocked by this issue. Interestingly the application shows up after reloading the page. So I am wondering about an ESM loading issue in WebKit (see below).

After enabling source mapping, I can see that the affected code is this one. The implementation dynamic module loading in Safari might have an issue, this line does not seem to work in Safari.

Wondering if is related to this WebKit issue (Race condition makes ESM modules to evaluate twice)? The issue is still marked as open, but I could not reproduce it with Safari Version 15.3 (17612.4.9.1.5) (Monterey 12.2).

Does anyone have more information? Any suggestions are appreciated, thank you.

conceptree commented 2 years ago

Hello all,

We have the same problem in the project that i am part of.

In our case we have the following scenario:

GIVEN the application with a valida user session WHEN the session expires AND we try to open a component THEN we have the error "Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'isProxied')"

This seems to be releated to an import module. If that component is previously loaded before the session expiration, this is not a problem, and we can use the component even if the session is expired.

Any thoughts on this?

Kind regards

ralfratai commented 2 years ago

Hello all,

we faced this issue too and did a quickfix which works well.

if (navigator.userAgent.indexOf('Safari') > -1) {
  window.onunhandledrejection = event => {
    if (event.reason.message.includes('isProxied')) {
      location.reload();
    }
  };
}

How it works: So we check if the browser is Safari. If yes we add the eventhandler for "unhandled Rejections". When "isPromise" rejection happens we check if the message include "isProxy". If yes we initiate a browser reload.

Maybe this help somebody else to go on.

Best

rahulgupta-dev commented 1 year ago

I am also getting error when ever there is new build, can we get some solution or workaround.

"@stencil/core": "^2.6.0",

"build": "stencil build --prod --no-cache && node ./src/tasks/after.build.js",

p-e82b5571.system.js:1 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'isProxied') at Object. (p-e82b5571.system.js:1:15976) at o (p-e82b5571.system.js:1:1866) at Object.next (p-e82b5571.system.js:1:1157) at l (p-e82b5571.system.js:1:693)

below is the file p-e82b5571.system.js content.

rwaskiewicz commented 10 months ago

Hey there 👋

I’m having trouble reproducing this on my end with the latest version of Stencil (v4). If anyone is willing/able, would you be able to create a minimal reproduction case for the team? If not, I completely understand. Again, I apologize for the lack of response here

ionitron-bot[bot] commented 10 months ago

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Stencil starter component library and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

ionitron-bot[bot] commented 9 months ago

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!

ionic-team / stencil

Unable to get property 'isProxied' of undefined or null reference (like #1661) #2774