bug: v6, custom elements, vite including old stencil lazy loading code

[riderx]

Prequisites

• 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

• v4.x
• v5.x
• v6.x

Current Behavior

when trying to create fresh project with vite and ionic 6 beta i got this :

1827|      return module[exportName];
1828|    }
1829|    return import(
   |                  ^
1830|      /* webpackInclude: /\.entry\.js$/ */
1831|      /* webpackExclude: /\.system\.entry\.js$/ */
The above dynamic import cannot be analyzed by vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.

  Plugin: vite:import-analysis

Expected Behavior

Since you said it work only for vue here : #23671 (comment)

i give a try like we can read here :
https://dev.to/aaronksaunders/getting-started-with-vitejs-ionic-framework-beta-v6-and-vuejs-2o8l
and this https://github.com/riderx/ionicv6-beta-vue-vite
doesn't work in my end

Steps to Reproduce

you can clone this : https://github.com/riderx/ionicv6-beta-vue-vite
and do npm i then npm run dev with node 16

Code Reproduction URL

https://github.com/riderx/ionicv6-beta-vue-vite

Ionic Info

Ionic:

   Ionic CLI : 6.17.0

Utility:

   cordova-res (update available: 0.15.3) : 0.15.2
   native-run                             : 1.4.0

System:

   NodeJS : v16.7.0
   npm    : 7.20.3
   OS     : macOS Monterey

Additional Information

No response

[riderx]

@aaronksaunders

[liamdebeasi]

Thanks for the issue. Is this preventing your app from compiling, or is it a warning in the console?

[riderx]

It compile but the rendering is broken and that the only issue I see :

https://github.com/Forgr-ee/Mimesis/tree/vite on the vite branch it's broken
on the current branch https://github.com/Forgr-ee/Mimesis/commits/old_firebase with webpack no issue

here the commit with the changes :
Forgr-ee/Mimesis@96df4f5

[liamdebeasi]

Thanks! Could you please clarify the steps to reproduce the issue? I am unable to get the warning described in #23823 (comment), and npm install fails on the reproduction provided in #23823 (comment) due to missing/corrupt dependencies.

[riderx]

@iampersistent I'm sorry for #23823 (comment) this was not from ionic.
it was missing in my project postcss.config.js for tailwind, it was the issue who broke the design.

The only issue is the warning in the console. everything works

[liamdebeasi]

Thanks I can reproduce this. Looks like it's importing some left over Stencil lazy-loading code. Since this is a warning, you should be fine to ignore it for now.

[piotr-cz]

There is a similar issue for stencil (ionic-team/stencil#3118) and possible fix (ionic-team/stencil#2959) with more details about the context.
App is being build fine, just the warning in watch mode is a bit annoying.

To reproduce:

1. clone https://github.com/piotr-cz/ionic-framework-bug-23516
2. npm install
3. npm start

[reslear]

same, any news to hide?

[johannschopplich]

Pretty keen on an update for this issue myself in 2022. 🙂

[axsann]

You can avoid this warning using patch-package.

$ yarn add -D patch-package

package.json

  "scripts": {
    ......
    "postinstall": "patch-package"
  },

Edit node_modules/@stencil/core/internal/client/index.js.
Add /* @vite-ignore */.

    return import(
    /* @vite-ignore */
    /* webpackInclude: /\.entry\.js$/ */
    /* webpackExclude: /\.system\.entry\.js$/ */
    /* webpackMode: "lazy" */

Create patch and re-install.

$ yarn patch-package @stencil/core
$ rm -rf ./node_modules
$ yarn

[realityfilter]

+1 for official /* @vite-ignore */

[riderx]

Seems the necessary change have been made into stencil!
Next step updates the dependency in ionic and release.
When seeing the change it looks it was more that just adding ignore somewhere.
Also while reading the doc it seems it could increase the bundle size: https://stenciljs.com/docs/config-extras#experimentalimportinjection

[liamdebeasi]

The bundle size increase should only apply to the dist output target. If you are using Ionic Vue v6 or Ionic React v6, then you are using the dist-custom-elements output target.

[liamdebeasi]

Thanks for the issue. This has been resolved in updates to both Stencil and Ionicons. An upcoming version of Ionic will force the installed versions of Ionicons and Stencil to update, but you can receive this fix now by reinstalling your Ionic dependencies.

To receive this fix, please make sure you are running @ionic/vue or @ionic/react v6.1.7 or newer as well as ionicons 6.0.2 or newer.

You may need to remove your node_modules or your package-lock.json and run a fresh npm install.

[piotr-cz]

After update to @ionic/react v6.1.7 the built vendor.[hash].js file decreased from 807KB to 792KB, the [vite] warning is gone too.

[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.