Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug: Popover backdrop not included in production builds #24129

Closed
4 of 6 tasks
jvartanian opened this issue Oct 28, 2021 · 2 comments
Closed
4 of 6 tasks

bug: Popover backdrop not included in production builds #24129

jvartanian opened this issue Oct 28, 2021 · 2 comments
Labels
package: core @ionic/core package type: bug a confirmed bug report v6 issues specific to Framework v6

Comments

@jvartanian
Copy link

Prerequisites

Ionic Framework Version

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

Current Behavior

In our Ionic React application, we are using the IonPopover component with the backdrop enabled.

When developing locally using npm run start, the popover opens and the backdrop is shown. Clicking outside of the popover closes it as expected.

However, when we deploy to our dev environment, the backdrop is not being shown, and the popover cannot be closed by clicking outside of it.

After some investigation, it appears that the IonBackdrop component is being marked as dead code during tree shaking, and not being included in the bundles created by npm run build.

Explicitly referencing the IonBackdrop somewhere in our code fixes the problem (i.e. console.log(IonBackdrop)).

Expected Behavior

After building and deploying the application, the backdrop should show and the user should be able to close the Popover by clicking outside of it.

Steps to Reproduce

  1. Create a blank React Ionic v6 project
  2. Add an IonButton and an IonPopover, with the button triggering the popover.
  3. Build the application: npm run build
  4. Run the application using a package such as serve
  5. Click on the button
  6. The popover shows without a backdrop

Code Reproduction URL

https://github.com/jvartanian/backdrop-tree-shaking

Ionic Info

Ionic:

Ionic CLI : 6.18.0 (~/.nvm/versions/node/v16.6.2/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 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 : not installed globally
native-run : 1.5.0

System:

NodeJS : v16.6.2 (/Users/justinvartanian/.nvm/versions/node/v16.6.2/bin/node)
npm : 7.20.3
OS : macOS Big Sur

Additional Information

No response

@ionitron-bot ionitron-bot bot added the triage label Oct 28, 2021
@liamdebeasi liamdebeasi added package: core @ionic/core package type: bug a confirmed bug report v6 issues specific to Framework v6 labels Nov 1, 2021
@ionitron-bot ionitron-bot bot removed triage labels Nov 1, 2021
willmartian added a commit that referenced this issue Nov 11, 2021
…rrectly defined (#24191)

resolves #23571, #24116, #24129

Co-authored-by: Liam DeBeasi <liamdebeasi@icloud.com>
@willmartian
Copy link
Contributor

This issue has been resolved in #24191, and the fix will be available in Ionic v6.0.0-rc.3. Thanks for the bug report!

@ionitron-bot
Copy link

ionitron-bot bot commented Dec 11, 2021

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.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Dec 11, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
package: core @ionic/core package type: bug a confirmed bug report v6 issues specific to Framework v6
Projects
None yet
Development

No branches or pull requests

3 participants