search

inocan-group / vue3-google-map

A set of composable components for easy use of Google Maps in your Vue 3 projects.
https://vue3-google-map.com
MIT License
272 stars 54 forks source link

Build errors: Vue 3's render function API has changed. You can opt-in to the new API #86

Closed ValiDrv closed 2 years ago

ValiDrv commented 2 years ago

I think there is something wrong in the 0.13.0 build. with Vue3, VIte and @vue/compat (upgrading app from vue2 to vue3)

If I use "vue3-google-map": "^0.13.0" from npm I can't render the default example. (see errors bellow)

But if I download the source and point the vue3-google-map alias to the downloaded /src folder while "vue3-google-map": "^0.13.0" is installed, the page renders correctly (except for the [Vue warn]: (deprecation WATCH_ARRAY) warnings)

If I only have the source, and no npm, i get errors about missing vue3-google-map ...

vue.cjs.js:1759 [Vue warn]: (deprecation WATCH_ARRAY) "watch" option or vm.$watch on an array value will no longer trigger on array mutation unless the "deep" option is specified. If current usage is intended, you can disable the compat behavior and suppress this warning with:

  configureCompat({ WATCH_ARRAY: false })

  Details: https://v3-migration.vuejs.org/breaking-changes/watch.html 
  at <GoogleMap api-key="xxxx" style= {width: '100%', height: '500px'} center= {lat: -28.024, lng: 140.887}  ... > 
  at <App>
warn$1 @ chunk-RTFBKC35.js?v=269f05df:17212
warnDeprecation @ chunk-RTFBKC35.js?v=269f05df:17926
checkCompatEnabled @ chunk-RTFBKC35.js?v=269f05df:18001
getter @ chunk-RTFBKC35.js?v=269f05df:18936
run @ chunk-RTFBKC35.js?v=269f05df:16342
job @ chunk-RTFBKC35.js?v=269f05df:18971
doWatch @ chunk-RTFBKC35.js?v=269f05df:19003
watch @ chunk-RTFBKC35.js?v=269f05df:18876
setup @ index.js:33
callWithErrorHandling @ chunk-RTFBKC35.js?v=269f05df:17313
setupStatefulComponent @ chunk-RTFBKC35.js?v=269f05df:24086
setupComponent @ chunk-RTFBKC35.js?v=269f05df:24049
mountComponent @ chunk-RTFBKC35.js?v=269f05df:22800
processComponent @ chunk-RTFBKC35.js?v=269f05df:22777
patch @ chunk-RTFBKC35.js?v=269f05df:22493
componentUpdateFn @ chunk-RTFBKC35.js?v=269f05df:22892
run @ chunk-RTFBKC35.js?v=269f05df:16342
instance.update @ chunk-RTFBKC35.js?v=269f05df:22981
setupRenderEffect @ chunk-RTFBKC35.js?v=269f05df:22989
mountComponent @ chunk-RTFBKC35.js?v=269f05df:22813
processComponent @ chunk-RTFBKC35.js?v=269f05df:22777
patch @ chunk-RTFBKC35.js?v=269f05df:22493
render2 @ chunk-RTFBKC35.js?v=269f05df:23362
mount @ chunk-RTFBKC35.js?v=269f05df:22026
app.mount @ chunk-RTFBKC35.js?v=269f05df:25968
init @ _inc.vue.js:38
(anonymous) @ main.js:5
vue.cjs.js:1759 [Vue warn]: (deprecation RENDER_FUNCTION) Vue 3's render function API has changed. You can opt-in to the new API with:

  configureCompat({ RENDER_FUNCTION: false })

  (This can also be done per-component via the "compatConfig" option.)
  Details: https://v3-migration.vuejs.org/breaking-changes/render-function-api.html 
  at <GoogleMap api-key="xxxx" style= {width: '100%', height: '500px'} center= {lat: -28.024, lng: 140.887}  ... > 
  at <App>
warn$1 @ chunk-RTFBKC35.js?v=269f05df:17212
warnDeprecation @ chunk-RTFBKC35.js?v=269f05df:17926
checkCompatEnabled @ chunk-RTFBKC35.js?v=269f05df:18001
convertLegacyRenderFn @ chunk-RTFBKC35.js?v=269f05df:19915
finishComponentSetup @ chunk-RTFBKC35.js?v=269f05df:24148
handleSetupResult @ chunk-RTFBKC35.js?v=269f05df:24132
setupStatefulComponent @ chunk-RTFBKC35.js?v=269f05df:24105
setupComponent @ chunk-RTFBKC35.js?v=269f05df:24049
mountComponent @ chunk-RTFBKC35.js?v=269f05df:22800
processComponent @ chunk-RTFBKC35.js?v=269f05df:22777
patch @ chunk-RTFBKC35.js?v=269f05df:22493
componentUpdateFn @ chunk-RTFBKC35.js?v=269f05df:22892
run @ chunk-RTFBKC35.js?v=269f05df:16342
instance.update @ chunk-RTFBKC35.js?v=269f05df:22981
setupRenderEffect @ chunk-RTFBKC35.js?v=269f05df:22989
mountComponent @ chunk-RTFBKC35.js?v=269f05df:22813
processComponent @ chunk-RTFBKC35.js?v=269f05df:22777
patch @ chunk-RTFBKC35.js?v=269f05df:22493
render2 @ chunk-RTFBKC35.js?v=269f05df:23362
mount @ chunk-RTFBKC35.js?v=269f05df:22026
app.mount @ chunk-RTFBKC35.js?v=269f05df:25968
init @ _inc.vue.js:38
(anonymous) @ main.js:5
vue.cjs.js:1759 [Vue warn]: Unhandled error during execution of render function 
  at <GoogleMap api-key="xxxx" style= {width: '100%', height: '500px'} center= {lat: -28.024, lng: 140.887}  ... > 
  at <App>
warn$1 @ chunk-RTFBKC35.js?v=269f05df:17212
logError @ chunk-RTFBKC35.js?v=269f05df:17366
handleError @ chunk-RTFBKC35.js?v=269f05df:17358
renderComponentRoot @ chunk-RTFBKC35.js?v=269f05df:18312
componentUpdateFn @ chunk-RTFBKC35.js?v=269f05df:22885
run @ chunk-RTFBKC35.js?v=269f05df:16342
instance.update @ chunk-RTFBKC35.js?v=269f05df:22981
setupRenderEffect @ chunk-RTFBKC35.js?v=269f05df:22989
mountComponent @ chunk-RTFBKC35.js?v=269f05df:22813
processComponent @ chunk-RTFBKC35.js?v=269f05df:22777
patch @ chunk-RTFBKC35.js?v=269f05df:22493
componentUpdateFn @ chunk-RTFBKC35.js?v=269f05df:22892
run @ chunk-RTFBKC35.js?v=269f05df:16342
instance.update @ chunk-RTFBKC35.js?v=269f05df:22981
setupRenderEffect @ chunk-RTFBKC35.js?v=269f05df:22989
mountComponent @ chunk-RTFBKC35.js?v=269f05df:22813
processComponent @ chunk-RTFBKC35.js?v=269f05df:22777
patch @ chunk-RTFBKC35.js?v=269f05df:22493
render2 @ chunk-RTFBKC35.js?v=269f05df:23362
mount @ chunk-RTFBKC35.js?v=269f05df:22026
app.mount @ chunk-RTFBKC35.js?v=269f05df:25968
init @ _inc.vue.js:38
(anonymous) @ main.js:5
chunk-RTFBKC35.js?v=269f05df:20181 Uncaught TypeError: Cannot read properties of undefined (reading 'default')
    at renderSlot (chunk-RTFBKC35.js?v=269f05df:20181:23)
    at Proxy.<anonymous> (index.js:37:132)
    at Proxy.compatRender (chunk-RTFBKC35.js?v=269f05df:19917:26)
    at renderComponentRoot (chunk-RTFBKC35.js?v=269f05df:18293:43)
    at ReactiveEffect.componentUpdateFn [as fn] (chunk-RTFBKC35.js?v=269f05df:22885:50)
    at ReactiveEffect.run (chunk-RTFBKC35.js?v=269f05df:16342:23)
    at instance.update (chunk-RTFBKC35.js?v=269f05df:22981:56)
    at setupRenderEffect (chunk-RTFBKC35.js?v=269f05df:22989:9)
    at mountComponent (chunk-RTFBKC35.js?v=269f05df:22813:9)
    at processComponent (chunk-RTFBKC35.js?v=269f05df:22777:13)
HusamElbashir commented 2 years ago

Hey @ValiDrv

I'm afraid this library hasn't been tested with the compat build. We have our own custom build script mainly because this library was created quite a while before other solutions existed such as Vite's Library Mode. Our intention is to migrate to that solution which might provide better compatibility with Vue's different builds and other libraries.

ValiDrv commented 2 years ago

By the way, your version 0.13.1 fixed some paths or something, since it builds correctly.

Pretty sure it's something with the paths to the dist folder or something along those lines.

The only was I could build it before was with "vue3-google-map": "^0.13.0" node_modules installed, and the source code downloaded somewhere else, plus vite resolve alias pointing to the source code (which was pointing to the node_modules install I think).

HusamElbashir commented 2 years ago

hmm this is odd. The only difference this time was that I built and published manually since the CI/CD pipeline failed to publish the new version for some reason after building. Haven't had time to investigate this but what it does is exactly the same as what I did locally. I'm closing this for now. If you encounter the issue again let me know.

ValiDrv commented 2 years ago

When I downloaded the source, this time it had the dist folder. My worry is that next time your build works it might break...