Hi Ryan,
Thanks for answering.
For more context, we have an in-company design system based on stencil, and the consumer is one of our owned application (but different team).
The design system has stencil as dependency:
{
"name": "@cosmos/web",
"dependencies": {
"@stencil/core": "^2.8.1"
}
}
And the app depends on our design system:
{
"dependencies": {
"@comsos/web": "^2.21.0"
}
}
We were also able to reproduce the issue by installing the last version of stencil on a testing application depending on our design system:
{
"dependencies": {
"@comsos/web": "^2.21.0",
"@stencil/core": "2.10.0"
}
}
The code is not directly importing @stencil/core/internal/client. It retrieve components from the bundle (compiled through the dist-custom-elements-bundle output target) like this:
import { CosmosButton } from '@cosmos/web';
The compiled bundle import the path:
// @cosmos/web/dist/custom-elements/index.js
// Generated by stencil
import { attachShadow, h, createEvent, Host, proxyCustomElement } from '@stencil/core/internal/client';
And if we look at the client file, here is the export:
// @stencil/core/internal/client v2.10
// No mention of attachShadow
...
export { Build, CSS, Context, Fragment, H, H as HTMLElement, Host, STENCIL_DEV_MODE, addHostEventListeners, bootstrapLazy, cmpModules, connectedCallback, consoleDevError, consoleDevInfo, consoleDevWarn, consoleError, createEvent, defineCustomElement, disconnectedCallback, doc, forceModeUpdate, forceUpdate, getAssetPath, getConnect, getContext, getElement, getHostRef, getMode, getRenderingRef, getValue, h, insertVdomAnnotations, isMemberInElement, loadModule, modeResolutionChain, nextTick, parsePropertyValue, plt, postUpdateComponent, promiseResolve, proxyComponent, proxyCustomElement, readTask, registerHost, registerInstance, renderVdom, setAssetPath, setErrorHandler, setMode, setPlatformHelpers, setPlatformOptions, setValue, styles, supportsConstructibleStylesheets, supportsListenerOptions, supportsShadow, win, writeTask };
But for the previous version
// @stencil/core/internal/client v2.10
// attachShadow is present
...
export { Build, CSS, Context, Fragment, H, H as HTMLElement, Host, STENCIL_DEV_MODE, addHostEventListeners, attachShadow, bootstrapLazy, cmpModules, connectedCallback, consoleDevError, consoleDevInfo, consoleDevWarn, consoleError, createEvent, defineCustomElement, disconnectedCallback, doc, forceModeUpdate, forceUpdate, getAssetPath, getConnect, getContext, getElement, getHostRef, getMode, getRenderingRef, getValue, h, insertVdomAnnotations, isMemberInElement, loadModule, modeResolutionChain, nextTick, parsePropertyValue, plt, postUpdateComponent, promiseResolve, proxyComponent, proxyCustomElement, readTask, registerHost, registerInstance, renderVdom, setAssetPath, setErrorHandler, setMode, setPlatformHelpers, setPlatformOptions, setValue, styles, supportsConstructibleStylesheets, supportsListenerOptions, supportsShadow, win, writeTask };
Running npm ls @stencil/core on a bugged app output this:
├─┬ @cosmos/web@2.15.0
│ └── @stencil/core@2.10.0 deduped
└── @stencil/core@2.10.0
Having a look into the docs, the update command pin the stencil version. I guess this would fix the issue, also it does not align with our own best practices regarding dependency management.
I hope this can help! If I can provide any more information, please let me know.
Cheers!
