bug: action sheet controller referencing ActionSheet before initialized

[popcorn245]

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

Updated from ionic 5 to 6 and throws an error that has been reported by several users.

Expected Behavior

Should work on as it did before the update

Steps to Reproduce

Start the app and try to use a select on any page.

Code Reproduction URL

https://github.com/popcorn245/ionic6-select-bug

Ionic Info

Ionic:

Ionic CLI : 5.4.16

Utility:

cordova-res : not installed
native-run : not installed

System:

NodeJS : v16.13.1
npm : 8.1.2
OS : Windows 10

Additional Information

Related to this issue.

#24448 (comment)

[popcorn245]

Also, kills prerender even if not using the component in your build.

[liamdebeasi]

Thanks for the issue. This behavior broke between RC 2 and RC 3 with RC 2 being the last working version.

[liamdebeasi]

The problem is we are referencing ActionSheet before it is initialized in the compiled JS file:

ionic-framework/core/src/utils/overlays.ts

Line 43 in 77f8412

export const actionSheetController = /*@__PURE__*/createController<ActionSheetOptions, HTMLIonActionSheetElement>('ion-action-sheet', ActionSheet, [{ tagName: 'ion-backdrop', customElement: Backdrop }, { tagName: 'ion-ripple-effect', customElement: RippleEffect }]);

What's interesting is this only impacts ActionSheet. All the other overlays are added to the build file before they are referenced. Only ActionSheet is added after.

[corysmc]

So I was seeing this same issue when running stencil in dev serve - however when I pulled the --dev flag off - it's serving properly (but minified - so kind of a pain - but at least it works): stencil build --watch --serve

@stencil/[email protected]
@ionic/[email protected]

Other workaround is to downgrade to @ionic/[email protected]

[GerardvdStelt]

I have the exact same problem using StencilJS. Using @ionic/[email protected] I can run locally but making a static build (stencil build --prerender) fails due to the before mentioned reason. Upgrading to @ionic/[email protected] makes that I cannot even run locally; the build provides no errors but the browser starts complaining about ActionSheet and doesn't show my page anymore.

Downgrading to @ionic/[email protected] like @corysmc mentions fixes these issues.

[liamdebeasi]

Thanks for the issue. This has been resolved via #24681, and a fix will be available in an upcoming release of Ionic Framework.

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