bug: [vue-cli-service] export 'attachShadow' (imported as 'attachShadow') was not found in '@stencil/core/internal/client'

[EranGrin]

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

• v4.x
• v5.x
• v6.x

Current Behavior

Ionic v6 vue
ionic serve, result in error
[vue-cli-service] warning in ./node_modules/@ionic/core/components/ion-accordion-group.js
[vue-cli-service] export 'attachShadow' (imported as 'attachShadow') was not found in '@stencil/core/internal/client' (possible exports: BUILD, Build, CSS, Context, Env, Fragment, H, HTMLElement, Host, NAMESPACE, 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)

and the GUI is also broken

Expected Behavior

Ionic serve should compile the app without any error, the components should load correctly, and the GUI should work as expected

Steps to Reproduce

1. npm install vue@next vue-router@4
2. npm install -g @vue/cli@next
3. npm install @ionic/vue@next @ionic/vue-router@next

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.18.0 (/Users/egr/.config/yarn/global/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 6.0.0-rc.1

Capacitor:

Capacitor CLI : 3.2.5
@capacitor/android : not installed
@capacitor/core : 3.2.5
@capacitor/ios : not installed

Utility:

cordova-res : 0.15.3
native-run : 1.5.0

System:

NodeJS : v14.17.3 (/usr/local/Cellar/node@14/14.17.3/bin/node)
npm : 6.14.13
OS : macOS Big Sur

Additional Information

This issue seems to repeat in all ionic components.
As written in the warning, the components try import the attachShadow from @stencil/core/internal/client but it is not being export from that destination.

I could make a fix which I'm not quite sure about
The only attachShadow I could find in the @stencil/core/internal/client is

Object.assign(Cstr.prototype, { __attachShadow() { if (supportsShadow) { if (BUILD.shadowDelegatesFocus) { this.attachShadow({ mode: 'open', delegatesFocus: !!(cmpMeta.$flags$ & 16 /* shadowDelegatesFocus */), }); } else { this.attachShadow({ mode: 'open' }); } } else { this.shadowRoot = this; } },

Therefore, my fix is to remove the attachShadow from the import in the components
import { createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';

and then change code to call the function from the prototype

const AccordionGroup = class extends HTMLElement {
constructor() {
super();
this.__registerHost();
attachShadow(this); change to => this.__attachShadow(this);
this.ionChange = createEvent(this, "ionChange", 7);

[liho00]

duplicate of #24153.

[liamdebeasi]

Thanks for the issue. This was due to a change in Stencil. Please see #24153 (comment) for a temporary workaround. This will be resolved in the next Ionic 6 RC.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.