bug: new useIonModal hook for Ionic React renders component outside tree

Bug Report

Ionic version:

[ ] 4.x [x ] 5.x [ ] 6.x

Current behavior: Just in case this behavior is unintended, the new useIonModal hook renders the modal component passed to present() outside of the react tree as a sibling of the root node. Because of this, the component used has no access to any app-wide context that wraps the main “App” component that the calling component belongs to.

Expected behavior: Render the component for the modal inside the root react tree.

Steps to reproduce:

Follow the Ionic docs for rendering/presenting a React modal using useIonModal() hook.

Related code:

Here’s a screenshot where you see the component that the hook renders next to the component tree instead of inside it (either as a child or sibling of <App />)

Other information:

In case this is the intended behavior for the useIonModal hook - this may be an opportunity to mention in the docs when deciding whether to use the original <IonModal> wrapping component or the hook. Perhaps that the hook is meant for modals that don’t need access to app-wide data and for those and other complex use-cases continue to use the <IonModal> component. I would be happy to PR to the docs if needed! Thanks

Ionic info:

Ionic:

   Ionic CLI       : 5.4.16 (/Users/rene/.npm/_npx/23301/lib/node_modules/ionic)
   Ionic Framework : @ionic/react 5.6.10

Capacitor:

   Capacitor CLI   : 2.4.6
   @capacitor/core : 2.4.7

Utility:

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

System:

   NodeJS : v12.16.3 (/Users/rene/.nvm/versions/node/v12.16.3/bin/node)
   npm    : 6.14.4
   OS     : macOS Mojave

[liamdebeasi]

Thanks for the issue. The original issue here was resolved via https://github.com/ionic-team/ionic-framework/commit/f3e492c897c8cda2b98050156f130654f4d7014a. The Preact issue has been resolved via https://github.com/ionic-team/ionic-framework/pull/24132, and a fix will be available in an upcoming release of Ionic 6.

• The build issue is is related to a Stencil change and has been fixed in Ionic 6 RC 2(see https://github.com/ionic-team/ionic-framework/issues/24153#issuecomment-958052376);
• The tsconfig changes were discussed in https://github.com/ionic-team/ionic-framework/pull/24132#issuecomment-959024082 and is an expected behavior of Preact. Developers should alias their exports: https://preactjs.com/guide/v10/getting-started/#typescript-preactcompat-configuration

[piotr-cz]

@liamdebeasi Thanks, https://github.com/ionic-team/ionic-framework/pull/24132 solved the issue in VSCode, however I’m unable to build. I’ll post details in referenced PR