Dynamic import not statically analyzable breaks tools like vite

[remorses]

Stencil version:

 @stencil/core@2.4.0

I'm submitting a:

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:
The following code relies on webpack specific import behaviour, other tools like vite and esbuild won't work because the import path is not statically analyzable without evaluating the expression

stencil/src/client/client-load-module.ts

Line 23 in cfd5d39

`./${bundleId}.entry.js${BUILD.hotModuleReplacement && hmrVersionId ? '?s-hmr=' + hmrVersionId : ''}`

Expected behavior:

Import calls should be statically analyzable, replace loadModule() with a direct import() call

Steps to reproduce:

https://github.com/haikyuu/vite-ionic

The same thing happens with esbuild, it isn't able to bundle the dynamic import and it will fail at runtime
https://github.com/remorses/stencil-reproduce-2827

Related code:

Other information:

[ionitron-bot]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Stencil, please create a new issue and ensure the template is fully filled out.

Thank you for using Stencil!

[liamdebeasi]

Reopening. Most of theses kinds of issues should be resolved by using custom elements directly and not relying on Stencil lazy loading. Work is already underway to provide full support for this and we will be sharing more soon. Thanks!

[ionitron-bot]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Stencil, please create a new issue and ensure the template is fully filled out.

Thank you for using Stencil!

[genesem]

@stencil/core version: 2.5.2,
@ionic/core: 5.6.6,
@ionic/vue: 5.6.6,
vite: 2.3.0,

index-7a8b7a1c.js:1 TypeError: Failed to fetch dynamically imported module: http://localhost:3000/@fs/C:/DevJS/_CJ_ViteVueTS/node_modules/.vite/ion-app_8.entry.js undefined

This issue exists with latest versions of vite and rollup. In other words do not build with anything except webpack.

[stewones]

Actually this is a problem with ionic, not vite/rollup

[stewones]

I mean stencil

[genesem]

I mean stencil

Thats exactly what I'm saying: ionic-vue do not compile/build corretly in vite (esbuild) nor rollup.

[AVapps]

The whole point of this issue is in fact to make stencil compatible with other dev/build tools (namely vite and rollup) so that we can use vite + ionic.

[simlevesque]

@liamdebeasi are you saying that there is a workaround for this ? could you please explain it ? currently a single component made with Stencil blocks me from using a new build system. Thank you

[liamdebeasi]

For developers using Stencil directly, you can output your components using the Custom Elements Bundle: https://stenciljs.com/docs/custom-elements. This approach does not use lazy loading which should help with static analysis in Vite.

For developers using Ionic Framework, we do have plans to use this custom elements output, but we will be doing that (at least for Vue initially) in Framework v6.

[ionitron-bot]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Stencil, please create a new issue and ensure the template is fully filled out.

Thank you for using Stencil!

[cgpro]

Is there any demo repo for stencil with esbuild?

[rwaskiewicz]

👋 This issue has been fixed with the v2.16.0 release of Stencil. As a result, I'm going to close this issue. If you believe that the bug still exists, please feel free to open a new ticket. Thanks again!

EDIT: This functionality is gated under a new flag, experimentalimportinjection. Folks wishing to make use of the functionality should enable this flag and recompile their Stencil projects.

[riderx]

@rwaskiewicz do the next version of ionic will be built with the flag?

[liamdebeasi]

We will be incorporating these changes into an upcoming release of Ionic. Please follow ionic-team/ionic-framework#23823 for updates.

[eriklharper]

Is there any demo repo for stencil with esbuild?

Only one I can find is the repro example created by the author of this issue: https://github.com/remorses/stencil-reproduce-2827

I cloned that and updated Stencil to 2.16 and esbuild to 0.14.43 and it no longer issues the warning, so it appears to be working with the update :)

[splanard]

I still have the same problem using a design system library based on Stencil 2.16.1... 😥

[rwaskiewicz]

@splanard can you please create a new issue with a minimal reproduction case please?

[SonyStone]

ate a new issue with a minimal reproduction case please?

I also have problem with Vite and Stencil 2.17.1

One of the teams trying to move Angular 17 to Vite so they informed me about the issue.

I checked with simple Angular 17 and it's working
https://stackblitz.com/edit/stackblitz-starters-imfdve?file=src%2Fmain.ts

But with Vite + Solidjs it does not
https://stackblitz.com/edit/solidjs-templates-jyeik4?file=src%2FApp.tsx

And I realy don't now what to do with it. Angular 17 don't have access to customize Vite config to do copy or something

[rwaskiewicz]

@SonyStone

At this time, Stencil v2 is no longer supported. I suggest upgrading to Stencil v4 if possible, which has the latest + greatest updates/support for Vite.

Otherwise, you may be able to see if experimentalImportInjection(docs link) in your stencil.config.ts file helps here.

If the issue still persists with Stencil v4 and experimentalImportInjection (note, we renamed this field to enableImportInjection in later versions of Stencil), can you please do me a favor and open a new issue?

[SonyStone]

@rwaskiewicz
No, still not working. I updated Stencil to version 4 and it didn't help

https://stackblitz.com/edit/solidjs-templates-jyeik4?file=package.json

I tried with and without enableImportInjection option

[shailen-sovtech]

Hi all, I am building a POC using the latest release of React components for What3Words but it still breaks vite. I am getting this error.