bug: instance is undefined when consuming dist-custom-elements bundle

[bitflower]

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

4.13.0

Current Behavior

We get this error:

index.js:3989 TypeError: Cannot read properties of undefined (reading 'render')
    at callRender (index.js:2224:43)
    at updateComponent (index.js:2149:9)
    at index.js:2091:40
    at enqueue (index.js:2109:90)
    at dispatchHooks (index.js:2091:12)
    at Array.dispatch (index.js:2027:28)
    at consume (index.js:4090:21)
    at flush (index.js:4145:9) 

See the readme.md in the repro project.

This is pre-discussed with @rwaskiewicz on Discord

Expected Behavior

The consumed Stencil package works without errors.

System Info

System: node 20.3.1
    Platform: darwin (22.3.0)
   CPU Model: Apple M1 Pro (10 cpus)
    Compiler: /Users/matthiasmax/Documents/Projekte/Temp/stencil-instance-issue/consumer-app/node_modules/@stencil/core/compiler/stencil.js
       Build: 1710782619
     Stencil: 4.13.0 🚞
  TypeScript: 5.4.2
      Rollup: 2.56.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre
      Terser: 5.29.2

Steps to Reproduce

Steps

Setup my-component-lib

cd my-componentlib
npm i
npm run build
npm link

Setup consumer-app

cd consumer-app
npm i
npm link my-componentlib
npm start

Now open your browser and check the console

Code Reproduction URL

https://github.com/bitflower/stencil-instance-issue

Additional Information

No response

[christian-bromann]

This is a duplicate of #5457

We will be starting working on a bugfix this week and will provide an update soon.

[bitflower]

Hi @christian-bromann,

that's great news, thank you.

[christian-bromann]

@bitflower sorry for the delayed response. I was finally able to get to the bottom of this. In your example you are importing a Stencil component that was generated through the dist-custom-element output target, in an environment that gets compiled with the dist output target via www. In these scenarios it is important to compile the imported components with their own Stencil library because they render differently: one is lazily initiated, the other isn't. To fix this, you will have to make the following change:

in my-component-lib/stencil.config.ts

diff --git a/my-component-lib/stencil.config.ts b/my-component-lib/stencil.config.ts
index c709469..b416c3b 100644
--- a/my-component-lib/stencil.config.ts
+++ b/my-component-lib/stencil.config.ts
@@ -8,6 +8,7 @@ export const config: Config = {
       type: 'dist-custom-elements',
       customElementsExportBehavior: 'bundle',
       isPrimaryPackageOutputTarget: true,
+      externalRuntime: false,
     },
   ],
   testing: {

This will ensure that the component uses the correct Stencil runtime and is not importing the runtime for lazy loaded components which it doesn't support. We will work to ensure that we have mechanism in place to avoid this from happening or at least throw a more meaningful error.

Let me know if you have any further questions.

[bitflower]

Hi @christian-bromann !

Thanks for your feedback ! I'll jump into this and try your proposal.

Will post back here with my findings.