bug: vue v6 with vue 3.1.0 overrides properties and event emitters

[tho-masn]

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.

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

[jakubkoje]

I have the same issue. Some components don't throw errors when they are not imported (ion-button, ion-datetime), but do when they are.

This unfortunately makes Ionic Vue 6 impossible to try out.

[liamdebeasi]

This is caused by a breaking change in Vue 3.1.0 that we need to account for in Framework v6. I recommend staying on Vue 3.0.11 while we work on a fix.

[jakubkoje]

It doesn't seem like downgrading to Vue 3.0.11 helps. I still get the same errors.

[liamdebeasi]

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

[jakubkoje]

I removed package-lock.json and node_modules. This is my package.json:

  "name": "ionic6",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@capacitor/app": "1.0.2",
    "@capacitor/core": "3.0.2",
    "@capacitor/haptics": "1.0.2",
    "@capacitor/keyboard": "1.0.2",
    "@capacitor/status-bar": "1.0.2",
    "@ionic/vue": "^6.0.0-beta.0",
    "@ionic/vue-router": "^6.0.0-beta.0",
    "core-js": "^3.15.2",
    "vue": "^3.0.11",
    "vue-router": "^4.0.10"
  },
  "devDependencies": {
    "@capacitor/cli": "3.0.2",
    "@typescript-eslint/eslint-plugin": "^4.28.1",
    "@typescript-eslint/parser": "^4.28.1",
    "@vue/cli-plugin-babel": "~5.0.0-beta.2",
    "@vue/cli-plugin-eslint": "~5.0.0-beta.2",
    "@vue/cli-plugin-router": "~5.0.0-beta.2",
    "@vue/cli-plugin-typescript": "~5.0.0-beta.2",
    "@vue/cli-service": "~5.0.0-beta.2",
    "@vue/compiler-sfc": "^3.1.2",
    "@vue/eslint-config-typescript": "^7.0.0",
    "eslint": "^7.29.0",
    "eslint-plugin-vue": "^7.12.1",
    "typescript": "~4.3.4"
  },
  "description": "An Ionic project"
}

And these are the errors I got:

ion-title.js?e035:24 Uncaught TypeError: Cannot read property 'emit' of undefined
    at HTMLElement.emitStyle (ion-title.js?e035:24)
    at HTMLElement.connectedCallback (ion-title.js?e035:20)
    at HTMLElement.connectedCallback (index.js?3105:2182)
    at insert (runtime-dom.esm-bundler.js?830f:9)
    at mountElement (runtime-core.esm-bundler.js?5c40:4822)
    at processElement (runtime-core.esm-bundler.js?5c40:4754)
    at patch (runtime-core.esm-bundler.js?5c40:4670)
    at componentEffect (runtime-core.esm-bundler.js?5c40:5208)
    at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
    at effect (reactivity.esm-bundler.js?a1e9:17)

[liamdebeasi]

If you run npm ls vue what is the result?

[jakubkoje]

Hmm

[email protected] /Users/jakub/Projects/Testing/ionic6
├─┬ @vue/[email protected]
│ └─┬ @vue/[email protected]
│   └── [email protected] deduped
├─┬ @vue/[email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
└── [email protected]

[liamdebeasi]

Ah the new CLI packages might be forcing [email protected] to get installed. We are looking into a fix for this now, and I will post a dev build here when I have a fix in place.

[tho-masn]

Try deleting your node_modules and reinstalling. Also make sure in your package-lock.json file that [email protected] 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",

[liamdebeasi]

Can everyone try the following dev build and let me know if it resolves the issue?

Vue

npm install @ionic/[email protected] @ionic/[email protected]

[elwinvaneede]

@liamdebeasi Yes, this resolved the Cannot read property 'emit' of undefined errors for me. Thanks.

But it seems to introduce a new bug. Might be unrelated but wanted to mention it.

I had the following setup function as a test:

setup() {
  const value = ref("value1");
  return { value };
}

And the following code in my template:

<ion-input :placeholder="value"></ion-input>

This now renders a Symbol() string value in the input.

With both vue 3.1.4 & 3.1.5

Although :value="value" & v-model="value" render correctly.

[liamdebeasi]

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

npm install @ionic/[email protected] @ionic/[email protected]

[elwinvaneede]

@liamdebeasi Fixed it!

[liamdebeasi]

Thanks for the issue. This has been resolved via #23738, and a fix will be available in an upcoming release of Ionic Framework.

Please feel free to continue testing the dev build in #23539 (comment), and let me know if you experience any other issues.

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