bug: Directory import ... is not supported resolving ES modules imported from ... Did you mean to import "@ionic/core/components/index.js"?

[jschill]

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

v8.x

Current Behavior

Using @ionic/react together with react-router generates errors:

[vite] Internal server error: Directory import '/workspace/my-spa-app/node_modules/@ionic/core/components' is not supported resolving ES modules imported from /workspace/my-spa-app/node_modules/@ionic/react/dist/index.js
Did you mean to import "@ionic/core/components/index.js"?

Expected Behavior

No error :-)

Steps to Reproduce

1. npx create-react-router@latest my-spa-app
2. cd my-spa-app
3. npm i @ionic/react
4. cd app and edit root.tsx, add import { IonApp, setupIonicReact } from "@ionic/react"; invoke the setupIonicReact and wrap your template with IonApp
5. Now go back to project root and npm run dev.

Code Reproduction URL

https://github.com/jschill/react-router-ionic-issue

Ionic Info

Not using the cli in this project, i just want the ui components. But this is my ionic info:

Ionic:

   Ionic CLI : 5.4.16

Utility:

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

System:

   NodeJS : v22.14.0
   npm    : 11.2.0
   OS     : macOS Unknown


  ────────────────────────────────────────────────────────────

           Ionic CLI update available: 5.4.16 → 7.2.0

     The package name has changed from ionic to @ionic/cli!

             To update, run: npm uninstall -g ionic
                 Then run: npm i -g @ionic/cli

  ────────────────────────────────────────────────────────────

Additional Information

Node 22.x