Cordova iOS - Not working with Vue3
vbgm opened this issue · 4 comments
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
meteor create --vue simple-todos-vue
cd simple-todos-vue
meteor add-platform ios
- assuming Xcode and prerequisites installedmeteor add cordova:cordova-plugin-meteor-webapp@2.0.0
- because of meteor 2.14 cordova bugmeteor run ios
- 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)
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.
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.
Any ideas when this can be fixed?
Hey @vbgm we have a task programmed to look into this for the v2.17 release which will occur sometime in August.