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

[wittemann]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

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]

@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.

[wittemann]

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

[comp615]

@christian-bromann perhaps not helpful, but we've been encountering the underlying issue here too. It seems to be caused by the underlying import statement returning a module with no members {} instead of { component_name: [Code] }. We're unsure of why that happens, but it does not seem to be an issue in CJS where require is used.

[christian-bromann]

@comp615 if you can reproduce this in a Stencil component starter project, please raise a new issue for this 🙏