bug: Components are not displayed in a micro front end app and NotFoundError is thrown

[hbeyan]

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

Current Behavior

We have Stencil library containing several components, and a micro front end app implemented with vue and micro-app framework for micro front end. The components are configured as shadow:false and scoped:true.

The components are rendered as expected in the sub app, where are using them directly, but some of them are not displayed in the main app, in which the sub app is placed. And there is the following console error in the main app:

@micro-zoe_micro-app.js?v=b0b11206:5642 Uncaught (in promise)
NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
at invokeRawMethod (@micro-zoe_micro-app.js?v=b0b11206:5642:20)
at commonElementHandler (@micro-zoe_micro-app.js?v=b0b11206:5675:10)
at HTMLHeadElement.insertBefore (@micro-zoe_micro-app.js?v=b0b11206:5686:12)
at addStyle (chunk-H42TCPBM.js?v=02bcdcca:368:34)
at attachStyles (chunk-H42TCPBM.js?v=02bcdcca:408:20)
at updateComponent (chunk-H42TCPBM.js?v=02bcdcca:871:5)
at chunk-H42TCPBM.js?v=02bcdcca:858:38
at enqueue (chunk-H42TCPBM.js?v=02bcdcca:863:6)
at dispatchHooks (chunk-H42TCPBM.js?v=02bcdcca:858:10)
at Array.dispatch (chunk-H42TCPBM.js?v=02bcdcca:844:26)

For example, this is a simple sub app, it contains a button and card components:

And this is the main app, which doesn't show the card despite seeing it in the html tree:

Here with the console message:

We suspect that addStyle method in runtime/styles.ts is calling insertBefore for a style node without checking the parent of reference node, which produces the error.

Expected Behavior

We expect to see the both button and card elements in the main app with no error:

System Info

System: node 18.19.0
    Platform: darwin (23.6.0)
   CPU Model: Apple M1 Pro (8 cpus)
    Compiler: Documents/micro-app-test/stencil-library/node_modules/@stencil/core/compiler/stencil.js
       Build: 1737085023
     Stencil: 4.24.0 🚜
  TypeScript: 5.5.4
      Rollup: 2.56.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre
      Terser: 5.31.1

Steps to Reproduce

• Go to the reproduction url: https://github.com/hbeyan/micro-app-test

• Clone the repository

• First you need to get a build for the stencil-library, run

  • cd stencil-library
  • npm i
  • npm run build && npm pack

• Then you will need to run the sub app:

  • cd ..
  • cd micro-app-sub
  • npm i
  • npm run dev

• It should open in the port:9090, observe that both button and card is displayed

• In a new terminal, run the main app:

  • cd micro-app-main
  • npm i
  • npm run dev

• It should open in the port:9191, observe that button is displayed, and card is not.

Code Reproduction URL

https://github.com/hbeyan/micro-app-test

Additional Information

No response