bug: ionic vue and other component break the vite dev server

[riderx]

Prerequisites

• 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 ionic is setup with vite and vue, if you import other component you will get a weird isFunction is not a function issue in dev server.
But nothing in production

Expected Behavior

Ionic and other component should be compatible

Steps to Reproduce

• Visit the stackbiz
• Start server with npm run dev
• Visit the second page to make it break
• Check the console and see the Error
• Kill your server
• Comment VueTelInput components in js and html
• Clean vite cache in the shell rm -rf node_modules/.vite/
• Restart your server
• Visit page second, and no issue.
• Go to ionic module code and comment IonicVue
• Go back to second component code and uncomment VueTelInput
• Visit the second page, and see the component working without issue
• It happed also with import VueCal from 'vue-cal'
• And probably other components

Code Reproduction URL

https://stackblitz.com/edit/vitejs-vite-a9zdh7?file=src/components/Secondcomp.vue

Ionic Info

Ionic:

Ionic CLI : 5.4.16

Utility:
cordova-res : not installed
native-run : not installed

System:
NodeJS : v14.17.0
npm : 7.17.0
OS : Linux

Additional Information

No response

[liamdebeasi]

Thanks for the issue. Can you provide this as a GitHub repo I can download and debug offline?

[riderx]

You can download the stackbiz project from the cloud icon or here : https://github.com/riderx/vitejs-vite-a9zdh7

[liamdebeasi]

Thanks. I can reproduce this behavior, but I do not think this is an Ionic bug.

The isFunction error is happening when setting up the RouterLink component which is in vue-router, not @ionic/vue. I added some logging inside of our install function, and the IonicVue plugin never gets called.

Additionally, the error is possibly related to the app's usage of the following code:

Object.values(import.meta.globEager('./modules/*.ts')).map((i) => {
  return i.install?.({ app });
});

If I import IonicVue and install it directly in main.ts then the error goes away.

Can you try debugging the app more to see if you can identify the piece of Ionic that you think causes this error?

[riderx]

Thanks @liamdebeasi for the answer.

I did remove the router link and router outlet, it was coming from the template example.

I still have the error, event i remove the module system and put IonicVue in main.ts

I have commit in the repo and you can see it still in stackblitz : https://stackblitz.com/edit/vitejs-vite-a9zdh7

The error is still there, but sometime you have to visit page 2 sometime it's when you start the app.

It doesn't seems to be a Ionic bug, i do think ionic is a part of the issue

[liamdebeasi]

I dug into this a bit more, and I think I see why this error is happening. The built output of vue-tel-input has the following:

module.exports = require('vue');

/**
 * In this case, I was loading the CJS version of `vue-tel-input`, 
 * but you can find a similar piece of code in the UMD version.
 */

This results in Vite bundling 2 different instances of Vue in the same app, which causes imports to misbehave. In this case, there are Common JS and ES Module versions of Vue being bundled, with the Common JS one being bundled as a result of vue-tel-input.

Ionic imports data from vue-router, which ends up calling defineComponent from Vue. This defineComponent function uses an imported isFunction call. Because there are 2 different instances of Vue bundled, isFunction ends up being undefined.

This means that when the Vue Router is configured inside of your router.ts file, the undefined isFunction is called, resulting in the error being reported here.

It seems that vue-router imports from the wrong Vue bundle when invoked from inside of @ionic/vue. This would explain why removing @ionic/vue resolves the issue. Additionally, removing the import.meta.globEager resolves the issue because isFunction is never called (the router is never set up). Removing the vue-tel-input import fixes the issue because there is only 1 version of Vue bundled.

You can verify this in your sample application with the following steps:

1. In the node_modules/.vite directory, open vue.js. Observe that there is an installation of Vue here.
2. Open vue-tel-input.js. Observer that there is an additional installation of Vue here as well. Also observe that it references node_modules/vue/dist/vue.cjs.js.

I recommend filing an issue on the vue-tel-input repo as it seems there are some compatibility issues with Vite. I did check in a Vue 3 + Webpack repo and I did not see this same issue happening. I am going to close this as this is not a bug in Ionic. Thanks!

[riderx]

@liamdebeasi WOW you are king 👑
i got this issue for month and cannot understand what was it, thanks for the explain, i will share your explain in the issue i have already raise there !
Thanks for your time again !

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