Cordova iOS - Not working with Vue3

[vbgm]

The default starting vue app meteor create --vue simple-todos-vue with meteor-vite, as well as custom one, using customised vuejs:vue (https://github.com/vbgm/meteor-vue3-less) in Cordova iOS as well as in Electron [email protected] have the same error related to TypeError: effect2 of dep.keys is not a function.

Steps to reproduce

1. meteor create --vue simple-todos-vue
2. cd simple-todos-vue
3. meteor add-platform ios - assuming Xcode and prerequisites installed
4. meteor add cordova:[email protected] - because of meteor 2.14 cordova bug
5. meteor run ios
6. Observe that in browser the app starts and renders normally, whereas in Cordova and Electron there is a blank screen. When looking to Web Inspector console on either Cordova or Electron - there is the same / very similar error message.

Actual behaviour

White screen of death

Expected behavior

Rendering app

Details

The full error log is below, I am still investigating the exact circumstances, so far I have understood that it is not because of vue-router(I've tried all the major versions) but rather ability of rendering dynamic variables inside templates, because static text is rendered without issues. The same I have seen before on Meteor 2.13.3 on my custom vue build and thought maybe it was my specific issue, yet it is the same elsewhere.

System

• MacOS Ventura 13.5.2
• Meteor 2.13.3 and also 2.14 - the default meteor create --vue simple-todos-vue app

Latest working

The latest working version of vue with Cordova iOS was 2.6.14 (not higher), tested both on Cordova iOS and Electron.

Full log

[Log] HMR: connected (hot-module-replacement.js, line 343)
[Warning] [Vue warn]: Unhandled error during execution of setup function (11) (cordova.js, line 1413)
"
"
" at <RouterLink"
"to="
{name: "home"}
">"
"
"
" at <Header>"
"
"
" at <Index>"
"
"
" at <App>"
[Warning] [Vue Router warn]: Unexpected error when starting the router: – TypeError: effect2 of dep.keys is not a function. (In 'effect2 of dep.keys()', 'effect2 of dep.keys' is undefined) — modules.js:36357 (cordova.js, line 1413)
TypeError: effect2 of dep.keys is not a function. (In 'effect2 of dep.keys()', 'effect2 of dep.keys' is undefined) — modules.js:36357
[Log] Uncaught Error: TypeError: effect2 of dep.keys is not a function. (In 'effect2 of dep.keys()', 'effect2 of dep.keys' is undefined):26881:http://localhost:12296/__cordova/packages/modules.js?hash=11599c4652c72ee6b3afc396fa029552a6c4a1e4 (cordova.js, line 1413)
[Error] TypeError: effect2 of dep.keys is not a function. (In 'effect2 of dep.keys()', 'effect2 of dep.keys' is undefined)
	logError (modules.js:26881)
	handleError (modules.js:26868)
	callWithErrorHandling (modules.js:26820)
	setupStatefulComponent (modules.js:34206)
	setupComponent (modules.js:34167)
	mountComponent (modules.js:32496)
	processComponent (modules.js:32462)
	patch (modules.js:31941)
	mountChildren (modules.js:32189)
	mountElement (modules.js:32096)
	processElement (modules.js:32061)
	patch (modules.js:31929)
	componentUpdateFn (modules.js:32606)
	run (modules.js:36245)
	(anonymous function) (modules.js:32730)
	setupRenderEffect (modules.js:32740)
	mountComponent (modules.js:32508)
	processComponent (modules.js:32462)
	patch (modules.js:31941)
	mountChildren (modules.js:32189)
	mountElement (modules.js:32096)
	processElement (modules.js:32061)
	patch (modules.js:31929)
	componentUpdateFn (modules.js:32606)
	run (modules.js:36245)
	(anonymous function) (modules.js:32730)
	setupRenderEffect (modules.js:32740)
	mountComponent (modules.js:32508)
	processComponent (modules.js:32462)
	patch (modules.js:31941)
	mountChildren (modules.js:32189)
	processFragment (modules.js:32405)
	patch (modules.js:31915)
	componentUpdateFn (modules.js:32606)
	run (modules.js:36245)
	(anonymous function) (modules.js:32730)
	setupRenderEffect (modules.js:32740)
	mountComponent (modules.js:32508)
	processComponent (modules.js:32462)
	patch (modules.js:31941)
	render (modules.js:33251)
	mount (modules.js:30590)
	(anonymous function) (modules.js:20022)
	(anonymous function) (app.js:610)
	maybeReady (meteor.js:1033)
	releaseReadyHold (meteor.js:1022)
	(anonymous function) (cordova.js:827)
	(anonymous function) (cordova.js:232)

[vbgm]

I have double checked if that could be the problem of using Vue's Composition API (

[vbgm]

Tested by downgrading npm vue package gradually from the latest back to 3.0. On 3.2.47 starting to get different error (and the page is partially rendered except of router-related elements):

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core 
"
"
" at <RouterView>"
"
"
" at <App>"

[Error] Unhandled Promise Rejection: TypeError: null is not an object (evaluating 'vnode.component.subTree')
	raise (promise.js:775)
	(anonymous function) (meteor.js:1379)

The latest working version of vue with Cordova iOS was 2.6.14 (not higher), tested both on Cordova iOS and Electron.

[vbgm]

Any ideas when this can be fixed?

[leonardoventurini]

Hey @vbgm we have a task programmed to look into this for the v2.17 release which will occur sometime in August.

[roman-orlovskiy]

Have the same error in meteor 3: https://forums.meteor.com/t/error-with-vue-in-meteor-3-projects/61924/6

Tested in yandex browser (based on chrome)