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

bug: Cannot read properties of undefined (reading 'isProxied') #5759

Closed
3 tasks done
wittemann opened this issue May 13, 2024 · 2 comments · Fixed by #5762
Closed
3 tasks done

bug: Cannot read properties of undefined (reading 'isProxied') #5759

wittemann opened this issue May 13, 2024 · 2 comments · Fixed by #5762
Assignees
Labels
Bug: Validated This PR or Issue is verified to be a bug within Stencil

Comments

@wittemann
Copy link

wittemann commented May 13, 2024

Prerequisites

Stencil Version

master

Current Behavior

The error

Cannot read properties of undefined (reading 'isProxied')

is reported a lot in our error queue.

Expected Behavior

No error is reported.

System Info

System: node 20.5.0
    Platform: darwin (23.4.0)
   CPU Model: Apple M2 Pro (10 cpus)
    Compiler: <private>/node_modules/@stencil/core/compiler/stencil.js
       Build: 1708455660
     Stencil: 4.12.3 🐍
  TypeScript: 5.3.3
      Rollup: 2.56.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre
      Terser: 5.27.1

Steps to Reproduce

I was not able to reproduce it with a stencil project but I went down the stencil code to analyze what is happening in I think I found the issue.

The root of the issue is located here:

if (BUILD.member && !Cstr.isProxied) {
https://github.com/ionic-team/stencil/blob/main/src/runtime/initialize-component.ts#L53

Cstr seems to be undefined. That variable is the result of a loadModule call

Cstr = loadModule(cmpMeta, hostRef, hmrVersionId);

In the error case, the call returns a promise as it should and you can see here
https://github.com/ionic-team/stencil/blob/main/src/client/client-load-module.ts#L45

Next the result is awaited here and overrides the promise with the actual content:
Cstr = await Cstr;
https://github.com/ionic-team/stencil/blob/main/src/runtime/initialize-component.ts#L47

But if the promise fulfills as undefined, the code will break. This can happen in case the connection is getting lost during loading of the file or the file is not there at all.

Usually the code like this breaks and throws an error but the error case of the dynamic loading of the module is already handles which means the code will continue as normal:
https://github.com/ionic-team/stencil/blob/main/src/client/client-load-module.ts#L56

I do have a standalone example to reproduce the issue:

  let Cstr = import('./not-there.js').then(() => {}, console.error);
  if (Cstr.then) {
    Cstr = await tmp;
  }

  console.log('should not be undefined', Cstr);  

Code Reproduction URL

https://codepen.io/wittemann/pen/xxNbeqK

Additional Information

Might be connected to #2774

@christian-bromann
Copy link
Member

@wittemann thanks for raising the issue. I raised a PR in #5762 with a fix for this. Note with this fix your code will still fail since the component can't be found.

@christian-bromann christian-bromann added Bug: Validated This PR or Issue is verified to be a bug within Stencil and removed triage labels May 13, 2024
@wittemann
Copy link
Author

@christian-bromann thanks for the feedback. Sure, as long as I can deal with the actual error I'm totally fine with it. :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug: Validated This PR or Issue is verified to be a bug within Stencil
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants