bug: Ionic doesn't work with Vite (anything except webpack)

[haikyuu]

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?

[remorses]

This is a problem with @stencil/core

It 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]

Created an issue at ionic-team/stencil#2827

[haikyuu]

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]

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 ionic-team/stencil#2827.

[haikyuu]

That's great news. Thanks @liamdebeasi

[lzm0x219]

This issue was not resolved.

[haikyuu]

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]

Hi there, as per my comment in #22924 (comment) I noted that I was closing this issue in favor of ionic-team/stencil#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]

@liamdebeasi Hi, thank you 🙏 but is planned before 2022?

[liamdebeasi]

I don't have a specific date to share, but yes we do plan on doing this before 2022.

[stewones]

seems like everyone is switching to vite, I think you guys could make this a priority and ship sooner.

[ionitron-bot]

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.