Repository navigation
bug: Ionic doesn't work with Vite (anything except webpack) #22924
Description
I'm trying to use Ionic in my app along with Vite.
But I'm getting a 404 http://localhost:3000/node_modules/.vite/ion-app_8.entry.js?import
You can try it out immediately here https://repl.it/@abdellah/vite-ionic-1 and here is its github repo https://github.com/haikyuu/vite-ionic
How can I use Vite with Ionic?
Activity
remorses commentedon Feb 15, 2021
This is a problem with
@stencil/coreIt is importing dynamically some modules and vite cannot statically analyze these imports
The problem is probably here
https://github.com/ionic-team/stencil/blob/cfd5d39bad4ce2cab431595ae8c8f11d1fabb192/src/client/client-load-module.ts#L23
remorses commentedon Feb 15, 2021
Created an issue at stenciljs/core#2827
[-]bug: Ionic doesn't work with Vite[/-][+]bug: Ionic doesn't work with Vite (anything except webpack)[/+]haikyuu commentedon Feb 16, 2021
It seems like Ionic is coupled to Webpack
It doesn't seem possible to use Ionic with Rollup, Vite or snowpack to name a few.
It's worth noting that Vite is becoming the defacto bundler for Vue projects and A lot of react projects are using it.
Workarounds exist for Snowpack but they suggest using a CDN. But this is not reasonable for building mobile apps!
liamdebeasi commentedon Feb 17, 2021
Thanks for the issue. The problem here is the fact that we rely on Stencil's lazy loading solution as noted in #22924 (comment).
We have a "Custom elements" build of Ionic Framework coming soon that does not use this lazy loading which will make the framework much easier to use with Rollup, Vite, etc. Keep an eye out for an announcement regarding this!
I am going to close this issue in favor of stenciljs/core#2827.
haikyuu commentedon Feb 18, 2021
That's great news. Thanks @liamdebeasi
lzm0x219 commentedon Mar 19, 2021
This issue was not resolved.
haikyuu commentedon Mar 22, 2021
Definitely! I guess this means it will be a won't fix ?!
Too bad for Ionic. Rollup and vite have a big portion of projects especially new ones. Webpack is a tool of the past.
liamdebeasi commentedon Mar 22, 2021
Hi there, as per my comment in #22924 (comment) I noted that I was closing this issue in favor of stenciljs/core#2827. (Our automated bot closed this out, but I reopened it because it should not have done that).
Work is already underway to support this and we will have more to share soon. Thanks!
reslear commentedon Apr 6, 2021
@liamdebeasi Hi, thank you 🙏 but is planned before 2022?
liamdebeasi commentedon Apr 6, 2021
I don't have a specific date to share, but yes we do plan on doing this before 2022.
stewones commentedon Apr 28, 2021
seems like everyone is switching to vite, I think you guys could make this a priority and ship sooner.
ionitron-bot commentedon May 28, 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.