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

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

https://user-images.githubusercontent.com/24187269/146756242-067557e2-17e2-4596-8375-f79e56709606.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)

https://user-images.githubusercontent.com/24187269/146757472-e6def746-9153-4377-9e10-ba1b37485a84.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

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

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