bug: ion-popover doesnt have backdrop in tree-shaken build (react & vue)

[JohnDeved]

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

in production, tree-shaken build, (npm run build && npx serve -s build)
popover are not dismissable by clicking on the backdrop. (no backdrop seems to show up)
its also possible to scroll while the popup is open.
I noticed this behavior when upgrading from v5 to v6

Screen.Recording.2021-12-20.at.11.52.13.mov

hosted production build: https://8179360d.ionic-popover-bug.pages.dev/

Expected Behavior

the backdrop should show up and it should be dismissable by clicking on it.
it also shouldn't be possible to scroll away while the popover is open.
interestingly enough everything seems to work fine in dev mode (npm start)

Screen.Recording.2021-12-20.at.12.01.22.mov

Steps to Reproduce

The only step to reproduce is to use popover in any way with react ionic and build to production.
just clone reproduction repo and create and serve a production build to encounter the issues.

Code Reproduction URL

https://github.com/JohnDeved/ionic-popover-bug

Ionic Info

Ionic:

   Ionic CLI       : 5.4.16 (/Users/undefined/.npm/_npx/864a9e3c2cd0cf50/node_modules/ionic)
   Ionic Framework : @ionic/react 6.0.1

Utility:

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

System:

   NodeJS : v16.13.1 (/Users/undefined/.nvm/versions/node/v16.13.1/bin/node)
   npm    : 8.1.2
   OS     : macOS Big Sur

Additional Information

No response

[ionitron-bot]

Thanks for the issue! This issue has been labeled as holiday triage. With the winter holidays quickly approaching, much of the Ionic Team will soon be taking time off. During this time, issue triaging and PR review will be delayed until the team begins to return. After this period, we will work to ensure that all new issues are properly triaged and that new PRs are reviewed.

In the meantime, please read our Winter Holiday Triage Guide for information on how to ensure that your issue is triaged correctly.

Thank you!

[sean-perkins]

I believe this is a result of nested custom elements not being defined in overlays. This has been resolved here #24439 and will be available in the next release of Ionic.

[sean-perkins]

Looks like this is a similar issue, but not resolved with the mentioned PR. I'll track this as a bug in v6.

The ion-backdrop custom element isn't being defined with the production build.

[sean-perkins]

Hello @JohnDeved thanks for the issue! I have an open PR that addresses the issue.

The resolution affects both ion-modal and ion-popover; as inline overlay components were not defining their children custom elements in tree-shaken builds.

The Core team is mostly out on vacation/holidays for the remainder of the year and we won't be pushing a new release of Ionic until after the New Year.

I've created a dev build if you'd like to confirm in your own projects:

npm install @ionic/react@6.0.1-dev.1640031995.c1d4978

I appreciate the reproduction application and notes; they were super helpful debugging the issue!

[JohnDeved]

@sean-perkins thank you so much for tackling this issue, very quick and good work 👍

[halykon]

Hey @sean-perkins, I tried using the development build you provided, but it seems like I'm running into another error:

I've updated @JohnDeved's repo to use the dev build you provided. Also, https://6b1da293.ionic-popover-bug.pages.dev/ is a preview build (The actual error is only visible while running on the dev server though).

[meddario]

Hi, the same also seems to happen with the vue.js version, "@ionic/vue": "^6.0.0", (actual version 6.0.1). Popovers have no backdrop with the production build.

[meddario]

Here a reproducer for the vue.js version. The README.md contains the instructions to reproduce the problem.

Let me kwow if I need to open a separate issue.

ionic-vue-popover-backdrop.zip

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