Prerequisites
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: stenciljs/core#5870, stenciljs/core#5869
Expected Behavior
To workaround this issue, the following is recommended until a new patch version is available:
- 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.
- 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
- 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"
}
- Rebuild your applications
Steps to Reproduce
N/A
Code Reproduction URL
N/A
Ionic Info
N/A
Additional Information
No response
Prerequisites
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 installin an older Ionic project (this will impact back to v7), due to the@stencil/coreversion being unpinned and installing 4.19.1.Browser environment:
Node environment:
Related Stencil issues: stenciljs/core#5870, stenciljs/core#5869
Expected Behavior
To workaround this issue, the following is recommended until a new patch version is available:
@ionic/*dependencies to a version 8.2.2 or earlier. These versions can resolve an older version of@stencil/corethat does not have the regressed behavior.@stencil/coreas a dependency. You can remove this after the new patch is available.npm ls @stencil/corea. If it is not, you can use the
overridesfeature with npm in your package.json:Steps to Reproduce
N/A
Code Reproduction URL
N/A
Ionic Info
N/A
Additional Information
No response