meteor/meteor

Cordova iOS - Not working with Vue3

vbgm opened this issue · 4 comments

vbgm commented

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 meteor-desktop@3.1.1 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:cordova-plugin-meteor-webapp@2.0.0 - 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 commented

I have double checked if that could be the problem of using Vue's Composition API (<script setup>) but no, it is the same on isolated Options API as well.

vbgm commented

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 commented

Any ideas when this can be fixed?

leonardoventurini commented

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

  • 👍2