bug: Directory import ... is not supported resolving ES modules imported from ... Did you mean to import "@ionic/core/components/index.js"? #30686
Description
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
npx create-react-router@latest my-spa-appcd my-spa-appnpm i @ionic/reactcd appand edit root.tsx, addimport { IonApp, setupIonicReact } from "@ionic/react";invoke the setupIonicReact and wrap your template with IonApp- 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