vue-leaflet/vue-leaflet

Vue3 + vue-leaflet + Webpack 5

leopowershield opened this issue · 2 comments

leopowershield commented

I'm not able to render the map using Vue3 + vue-leaflet + Webpack 5.

I'm using vue-facing-decorator as well, not sure if it could be a problem.

I'm getting this error when trying to render a simple map:

TypeError: Cannot read properties of undefined (reading 'style')
at Proxy.render (vue-leaflet.es.js:1371:1)

I've tried :useGlobalLeaflet="false", but no success.

Creating a new project, with no Webpack and other packages, it works fine.

Versions:
"@vue-leaflet/vue-leaflet": "0.10.1"
"leaflet": "1.9.4"

slaweet commented

I'm getting TypeError: Cannot read properties of undefined (reading 'style') with Vue3 + vue-leaflet + Webpack 5 as well.

Looking at the stack trace, I suspect the error might be related to using @vue/compat.

Cannot read properties of undefined (reading 'style')
TypeError: Cannot read properties of undefined (reading 'style')
    at Proxy.render (webpack-internal:///./node_modules/@vue-leaflet/vue-leaflet/dist/vue-leaflet.es.js:1400:14)
    at Proxy.compatRender (webpack-internal:///./node_modules/@vue/compat/dist/vue.runtime.esm-bundler.js:8901:27)
    at renderComponentRoot (webpack-internal:///./node_modules/@vue/compat/dist/vue.runtime.esm-bundler.js:3030:44)
    at ReactiveEffect.componentUpdateFn [as fn] (webpack-internal:///./node_modules/@vue/compat/dist/vue.runtime.esm-bundler.js:7818:57)
    at ReactiveEffect.run (webpack-internal:///./node_modules/@vue/compat/dist/vue.runtime.esm-bundler.js:657:25)
    at setupRenderEffect (webpack-internal:///./node_modules/@vue/compat/dist/vue.runtime.esm-bundler.js:7956:9)
    at mountComponent (webpack-internal:///./node_modules/@vue/compat/dist/vue.runtime.esm-bundler.js:7724:9)
    at processComponent (webpack-internal:///./node_modules/@vue/compat/dist/vue.runtime.esm-bundler.js:7678:17)
    at patch (webpack-internal:///./node_modules/@vue/compat/dist/vue.runtime.esm-bundler.js:7279:21)
    at patchBlockChildren (webpack-internal:///./node_modules/@vue/compat/dist/vue.runtime.esm-bundler.js:7587:13)
leopowershield commented

I'm getting TypeError: Cannot read properties of undefined (reading 'style') with Vue3 + vue-leaflet + Webpack 5 as well.

Looking at the stack trace, I suspect the error might be related to using @vue/compat.

Cannot read properties of undefined (reading 'style')
TypeError: Cannot read properties of undefined (reading 'style')
    at Proxy.render (webpack-internal:///./node_modules/@vue-leaflet/vue-leaflet/dist/vue-leaflet.es.js:1400:14)
    at Proxy.compatRender (webpack-internal:///./node_modules/@vue/compat/dist/vue.runtime.esm-bundler.js:8901:27)
    at renderComponentRoot (webpack-internal:///./node_modules/@vue/compat/dist/vue.runtime.esm-bundler.js:3030:44)
    at ReactiveEffect.componentUpdateFn [as fn] (webpack-internal:///./node_modules/@vue/compat/dist/vue.runtime.esm-bundler.js:7818:57)
    at ReactiveEffect.run (webpack-internal:///./node_modules/@vue/compat/dist/vue.runtime.esm-bundler.js:657:25)
    at setupRenderEffect (webpack-internal:///./node_modules/@vue/compat/dist/vue.runtime.esm-bundler.js:7956:9)
    at mountComponent (webpack-internal:///./node_modules/@vue/compat/dist/vue.runtime.esm-bundler.js:7724:9)
    at processComponent (webpack-internal:///./node_modules/@vue/compat/dist/vue.runtime.esm-bundler.js:7678:17)
    at patch (webpack-internal:///./node_modules/@vue/compat/dist/vue.runtime.esm-bundler.js:7279:21)
    at patchBlockChildren (webpack-internal:///./node_modules/@vue/compat/dist/vue.runtime.esm-bundler.js:7587:13)

It seems you're right. Removing vue/compat package there is no error. I've seem this happening to other components as well.