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

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 : https://github.com/ionic-team/ionic-framework/issues/23671#issuecomment-884890552

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

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 16 (5 by maintainers)

Commits related to this issue

fix(all): improve compatibility with vite (#25381) resolves #23823 — committed to ionic-team/ionic-framework by liamdebeasi 2 years ago

Most upvoted comments

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

realityfilter on Feb 23, 2022

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

axsann on Jan 29, 2022

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.

piotr-cz on Jun 1, 2022

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 on May 31, 2022

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

To reproduce:

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

piotr-cz on Nov 5, 2021

@iampersistent I’m sorry for https://github.com/ionic-team/ionic-framework/issues/23823#issuecomment-907336982 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

riderx on Aug 29, 2021

@aaronksaunders

riderx on Aug 26, 2021