ionic-framework: bug: vue v6 with vue 3.1.0 overrides properties and event emitters

Bug Report

Ionic version:

[ ] 4.x [ ] 5.x [ x] 6.x

Current behavior: Using the ion-title component in the v6 vue beta leads to the following console error: “Cannot read property ‘emit’ of undefined”. The component itself gets rendered, and it seems to work - it just throws an error

EDIT: Same error happens to the ion-menu component.

Screenshot 2021-06-30 at 09 46 12

Expected behavior: No error should be thrown

Steps to reproduce:

  • Create a new ionic vue project
  • Upgrade to v6 beta according to upgrade guide
  • Serve project and open app in browser
  • Check console

Related code:

https://github.com/tho-masn/ionic-ion-title-bug

Other information:

Ionic info:

[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package'

       Require stack:
       - /usr/local/lib/node_modules/@ionic/cli/lib/project/index.js
       - /usr/local/lib/node_modules/@ionic/cli/lib/index.js
       - /usr/local/lib/node_modules/@ionic/cli/index.js
       - /usr/local/lib/node_modules/@ionic/cli/bin/ionic
[WARN] Error loading @capacitor/android package.json: Error: Cannot find module '@capacitor/android/package'

       Require stack:
       - /usr/local/lib/node_modules/@ionic/cli/lib/project/index.js
       - /usr/local/lib/node_modules/@ionic/cli/lib/index.js
       - /usr/local/lib/node_modules/@ionic/cli/index.js
       - /usr/local/lib/node_modules/@ionic/cli/bin/ionic

Ionic:

   Ionic CLI       : 6.16.3 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 6.0.0-beta.0

Capacitor:

   Capacitor CLI      : 3.0.2
   @capacitor/android : not installed
   @capacitor/core    : 3.0.2
   @capacitor/ios     : not installed

Utility:

   cordova-res : not installed globally
   native-run  : 1.4.0

System:

   NodeJS : v14.8.0 (/usr/local/Cellar/node/14.8.0/bin/node)
   npm    : 6.14.7
   OS     : macOS Big Sur

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 2
  • Comments: 15 (7 by maintainers)

Commits related to this issue

Most upvoted comments

Thanks! Can you give this updated dev build a shot?

npm install @ionic/vue@6.0.0-dev.202108062034.a70597a @ionic/vue-router@6.0.0-dev.202108062034.a70597a

Try deleting your node_modules and reinstalling. Also make sure in your package-lock.json file that vue@3.0.11 is getting installed. Downgrading to that version fixed the issue on my end.

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/23738, and a fix will be available in an upcoming release of Ionic Framework.

Please feel free to continue testing the dev build in https://github.com/ionic-team/ionic-framework/issues/23539#issuecomment-894506787, and let me know if you experience any other issues.

Try deleting your node_modules and reinstalling. Also make sure in your package-lock.json file that vue@3.0.11 is getting installed. Downgrading to that version fixed the issue on my end.

@liamdebeasi: Thanks, for me this indeed fixes the issue. @jakubkoje: I assume the reason why it is not working for you is because of the caret in your package.json, which updates to the latest minor vue version again if you remove the package-lock.json file.

"vue": "^3.0.11",

Stick to the old vue version by using this line should resolve the issue:

"vue": "3.0.11",