bug: DOMException: Failed to execute 'insertBefore' on 'Node'

[sean-perkins]

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.

Ionic Framework Version

v7.x, v8.x

Current Behavior

Developers may observe an unexpected runtime exception after installing the latest version of Ionic or running npm install in an older Ionic project (this will impact back to v7), due to the @stencil/core version being unpinned and installing 4.19.1.

Browser environment:

 DOMException: 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 addStyle (http://192.168.2.240:8100/node_modules/.vite/deps/chunk-EAKC337R.js?v=364e7a2a:805:30)
    at attachStyles (http://192.168.2.240:8100/node_modules/.vite/deps/chunk-EAKC337R.js?v=364e7a2a:825:20)
    at updateComponent (http://192.168.2.240:8100/node_modules/.vite/deps/chunk-EAKC337R.js?v=364e7a2a:1610:5)
    at http://192.168.2.240:8100/node_modules/.vite/deps/chunk-EAKC337R.js?v=364e7a2a:1597:38
    at enqueue (http://192.168.2.240:8100/node_modules/.vite/deps/chunk-EAKC337R.js?v=364e7a2a:1602:6)
    at dispatchHooks (http://192.168.2.240:8100/node_modules/.vite/deps/chunk-EAKC337R.js?v=364e7a2a:1597:10)
    at Array.dispatch (http://192.168.2.240:8100/node_modules/.vite/deps/chunk-EAKC337R.js?v=364e7a2a:1561:26)
    at consume (http://192.168.2.240:8100/node_modules/.vite/deps/chunk-EAKC337R.js?v=364e7a2a:248:16)
    at flush (http://192.168.2.240:8100/node_modules/.vite/deps/chunk-EAKC337R.js?v=364e7a2a:290:5) 

Node environment:

HierarchyRequestError: Invalid insertion of STYLE node in #document node.
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Serialized Error: { code: 3, INDEX_SIZE_ERR: 1, DOMSTRING_SIZE_ERR: 2, HIERARCHY_REQUEST_ERR: 3, WRONG_DOCUMENT_ERR: 4, INVALID_CHARACTER_ERR: 5, NO_DATA_ALLOWED_ERR: 6, NO_MODIFICATION_ALLOWED_ERR: 7, NOT_FOUND_ERR: 8, NOT_SUPPORTED_ERR: 9, INUSE_ATTRIBUTE_ERR: 10, INVALID_STATE_ERR: 11, SYNTAX_ERR: 12, INVALID_MODIFICATION_ERR: 13, NAMESPACE_ERR: 14, INVALID_ACCESS_ERR: 15, VALIDATION_ERR: 16, TYPE_MISMATCH_ERR: 17, SECURITY_ERR: 18, NETWORK_ERR: 19, ABORT_ERR: 20, URL_MISMATCH_ERR: 21, QUOTA_EXCEEDED_ERR: 22, TIMEOUT_ERR: 23, INVALID_NODE_TYPE_ERR: 24, DATA_CLONE_ERR: 25 }

Related Stencil issues: ionic-team/stencil#5870, ionic-team/stencil#5869

Expected Behavior

To workaround this issue, the following is recommended until a new patch version is available:

1. Pin the @ionic/* dependencies to a version 8.2.2 or earlier. These versions can resolve an older version of @stencil/core that does not have the regressed behavior.
2. Install v4.18.3 of @stencil/core as a dependency. You can remove this after the new patch is available.

npm install @stencil/core@4.18.3 --save-exact

3. Confirm that 4.18.3 is being resolved with npm ls @stencil/core
   a. If it is not, you can use the overrides feature with npm in your package.json:

   "overrides": {
     "@stencil/core": "4.18.3"
   }

4. Rebuild your applications

Steps to Reproduce

N/A

Code Reproduction URL

N/A

Ionic Info

N/A

Additional Information

No response

[brandyscarney]

This has been resolved by @stencil/core@4.19.2 and Ionic Framework v8.2.5. Please make sure you are on these versions and open a new issue if you are still seeing problems.