Vue: Cannot create property 'default' on boolean 'true'"
Version
2.6.10
Reproduction link
https://codesandbox.io/s/v8r388y7y
Steps to reproduce
When i use scope slot inside scope slot i get this error. In condsandbox i could not reproduce it, but the same code i have is there
It happened when i upgraded from vue 2.6.7 -> 2.6.10
What is expected?
Not to fail
What is actually happening?
The code i have in sandbox is compiled like this
var render = function() {
var _vm = this
var _h = _vm.$createElement
var _c = _vm._self._c || _h
return _c(
"div",
{ staticClass: "google-map" },
[
_c("map-loader", {
ref: "mapLoader",
attrs: { apiKey: _vm.apiKey, mapConfig: _vm.mapConfig },
scopedSlots: _vm._u(
[
{
key: "default",
fn: function(ref) {
var google = ref.google
var map = ref.map
return [
_vm._t("slot-big-slot", null, { google: google, map: map }),
_c(
"div",
{ staticClass: "slot-container" },
[
_vm.markers.length < 2
? _vm._l(_vm.markers, function(marker) {
return _c("google-map-marker", {
key: marker.lat marker.lng,
attrs: {
marker: marker,
google: google,
map: map
}
})
})
: _vm._e(),
_vm.markers.length === 2
? _c("route", {
key:
_vm.markers[0].lat
_vm.markers[1].lat
_vm.markers[0].lng
_vm.markers[1].lng,
attrs: {
google: google,
markers: _vm.markers,
map: map
}
})
: _vm._e()
],
2
)
]
}
}
],
null,
true
)
})
],
1
)
}
var staticRenderFns = []
render._withStripped = true
export { render, staticRenderFns }
klimentLambevski
All 10 comments
default is a reserved keyword and therefore cannot be used in specific places in JS
posva
on 11 Apr 2019
@posva I am not using default keyword
This happened when i update vue.
Check this code https://codesandbox.io/s/v8r388y7y
This code fails
<template>
<div class="google-map">
<map-loader :apiKey="apiKey" :mapConfig="mapConfig" ref="mapLoader">
<template v-slot="{ google, map }">
<div class="slot-container">
<slot
:google="google"
:map="map">
</slot>
</div>
</template>
</map-loader>
</div>
</template>
This does not fail
<template>
<div class="google-map">
<map-loader :apiKey="apiKey" :mapConfig="mapConfig" ref="mapLoader">
<slot
:google="google"
:map="map">
</slot>
<template v-slot="{ google, map }">
<div class="slot-container">
</div>
</template>
</map-loader>
</div>
</template>
It fails when slot is inside slot
Are you sure it is not a bug in vue-loader?
Because on sandbox the template is not compiled and it works fine
I know that default is a keyword, not my first rodeo ...
klimentLambevski
on 11 Apr 2019
ah, sorry looking at the title it looked like you wanted to use default in your code.
I can take a look if you boil down your repro (no maps)
posva
on 11 Apr 2019
@posva thanks
here is updated codesandbox https://codesandbox.io/s/v8r388y7y
It is a mockup of my setup so this should reproduce it.
On codesandbox is working fine, i assume the loader produce the error when compiling the the template
This is only happening on vue 2.6.10.
I will try to make a clean setup and see if i can reproduce in github repo
klimentLambevski
on 11 Apr 2019
What does the stack trace look like when you encounter that error? I am going to guess you have a boolean literal true in some place that needs to be an object literal {}
sirlancelot
on 11 Apr 2019
@sirlancelot
[Vue warn]: Error in render: "TypeError: Cannot create property 'default' on boolean 'true'"
warn | @ | vue.runtime.esm.js?2b0e:619
-- | -- | --
| logError | @ | vue.runtime.esm.js?2b0e:1874
| globalHandleError | @ | vue.runtime.esm.js?2b0e:1869
| handleError | @ | vue.runtime.esm.js?2b0e:1835
| Vue._render | @ | vue.runtime.esm.js?2b0e:3519
| updateComponent | @ | vue.runtime.esm.js?2b0e:4019
| get | @ | vue.runtime.esm.js?2b0e:4419
| Watcher | @ | vue.runtime.esm.js?2b0e:4408
| mountComponent | @ | vue.runtime.esm.js?2b0e:4026
| Vue.$mount | @ | vue.runtime.esm.js?2b0e:8350
| init | @ | vue.runtime.esm.js?2b0e:3093
| createComponent | @ | vue.runtime.esm.js?2b0e:5918
| createElm | @ | vue.runtime.esm.js?2b0e:5865
| createChildren | @ | vue.runtime.esm.js?2b0e:5993
| createElm | @ | vue.runtime.esm.js?2b0e:5894
| patch | @ | vue.runtime.esm.js?2b0e:6417
| Vue._update | @ | vue.runtime.esm.js?2b0e:3898
| updateComponent | @ | vue.runtime.esm.js?2b0e:4019
| get | @ | vue.runtime.esm.js?2b0e:4419
| Watcher | @ | vue.runtime.esm.js?2b0e:4408
| mountComponent | @ | vue.runtime.esm.js?2b0e:4026
| Vue.$mount | @ | vue.runtime.esm.js?2b0e:8350
| init | @ | vue.runtime.esm.js?2b0e:3093
| createComponent | @ | vue.runtime.esm.js?2b0e:5918
| createElm | @ | vue.runtime.esm.js?2b0e:5865
| createChildren | @ | vue.runtime.esm.js?2b0e:5993
| createElm | @ | vue.runtime.esm.js?2b0e:5894
| patch | @ | vue.runtime.esm.js?2b0e:6417
| Vue._update | @ | vue.runtime.esm.js?2b0e:3898
| updateComponent | @ | vue.runtime.esm.js?2b0e:4019
| Promise.then (async) | |
| timerFunc | @ | vue.runtime.esm.js?2b0e:1923
| nextTick | @ | vue.runtime.esm.js?2b0e:1980
| queueWatcher | @ | vue.runtime.esm.js?2b0e:4342
| update | @ | vue.runtime.esm.js?2b0e:4484
| notify | @ | vue.runtime.esm.js?2b0e:730
| reactiveSetter | @ | vue.runtime.esm.js?2b0e:1055
| (anonymous) | @ | vue-router.esm.js?8c4f:2503
| (anonymous) | @ | vue-router.esm.js?8c4f:2502
| updateRoute | @ | vue-router.esm.js?8c4f:1989
| (anonymous) | @ | vue-router.esm.js?8c4f:1867
| (anonymous) | @ | vue-router.esm.js?8c4f:1976
| step | @ | vue-router.esm.js?8c4f:1706
| step | @ | vue-router.esm.js?8c4f:1713
| step | @ | vue-router.esm.js?8c4f:1713
| runQueue | @ | vue-router.esm.js?8c4f:1717
| (anonymous) | @ | vue-router.esm.js?8c4f:1971
| step | @ | vue-router.esm.js?8c4f:1706
| (anonymous) | @ | vue-router.esm.js?8c4f:1710
| (anonymous) | @ | vue-router.esm.js?8c4f:1956
| (anonymous) | @ | vue-router.esm.js?8c4f:1749
| (anonymous) | @ | vue-router.esm.js?8c4f:1825
| Promise.then (async) | |
| (anonymous) | @ | vue-router.esm.js?8c4f:1772
| (anonymous) | @ | vue-router.esm.js?8c4f:1793
| (anonymous) | @ | vue-router.esm.js?8c4f:1793
| flatMapComponents | @ | vue-router.esm.js?8c4f:1792
| (anonymous) | @ | vue-router.esm.js?8c4f:1728
| iterator | @ | vue-router.esm.js?8c4f:1935
| step | @ | vue-router.esm.js?8c4f:1709
| step | @ | vue-router.esm.js?8c4f:1713
| step | @ | vue-router.esm.js?8c4f:1713
| step | @ | vue-router.esm.js?8c4f:1713
| runQueue | @ | vue-router.esm.js?8c4f:1717
| confirmTransition | @ | vue-router.esm.js?8c4f:1964
| transitionTo | @ | vue-router.esm.js?8c4f:1866
| push | @ | vue-router.esm.js?8c4f:2267
| push | @ | vue-router.esm.js?8c4f:2529
| (anonymous) | @ | RegisterPage.vue?9f60:35
| Promise.then (async) | |
| onRegister | @ | RegisterPage.vue?9f60:29
| invokeWithErrorHandling | @ | vue.runtime.esm.js?2b0e:1847
| invoker | @ | vue.runtime.esm.js?2b0e:2169
| invokeWithErrorHandling | @ | vue.runtime.esm.js?2b0e:1847
| Vue.$emit | @ | vue.runtime.esm.js?2b0e:3841
| onRegister | @ | RegisterForm.vue?d70a:40
| invokeWithErrorHandling | @ | vue.runtime.esm.js?2b0e:1847
| invoker | @ | vue.runtime.esm.js?2b0e:2169
| invokeWithErrorHandling | @ | vue.runtime.esm.js?2b0e:1847
| Vue.$emit | @ | vue.runtime.esm.js?2b0e:3841
| register | @ | CarrierRegisterForm.vue?3d63:148
| invokeWithErrorHandling | @ | vue.runtime.esm.js?2b0e:1847
| invoker | @ | vue.runtime.esm.js?2b0e:2169
| invokeWithErrorHandling | @ | vue.runtime.esm.js?2b0e:1847
| Vue.$emit | @ | vue.runtime.esm.js?2b0e:3841
| onClick | @ | vi-button.vue?fc06:48
| invokeWithErrorHandling | @ | vue.runtime.esm.js?2b0e:1847
| invoker | @ | vue.runtime.esm.js?2b0e:2169
| invokeWithErrorHandling | @ | vue.runtime.esm.js?2b0e:1847
| Vue.$emit | @ | vue.runtime.esm.js?2b0e:3841
| click | @ | QBtn.js?9c40:37
| invokeWithErrorHandling | @ | vue.runtime.esm.js?2b0e:1847
| invoker | @ | vue.runtime.esm.js?2b0e:2169
| original._wrapper | @ | vue.runtime.esm.js?2b0e:6855
| Show 51 more frames
found in
---> <GoogleMap> at src/components/maps/GoogleMap.vue
<CurrentLocation> at src/components/deliverer/CurrentLocation.vue
<CurrentLocationPage> at src/pages/deliverer/CurrentLocationPage.vue
<QPageContainer>
<QLayout>
<DelivererLayout> at src/layouts/DelivererLayout.vue
<App> at src/App.vue
<Root>
Here is the full stack trace.
The problem occurs when i use scoped slot inside component scoped slot
For example
I have component map-loader
<div>
<slot :map="map"></slot>
</div>
GoogleMap
<div>
<map-loader>
<template v-slot={map}>
<slot :map="map"></slot>
</template>
</div> ----> this fails
<div>
<map-loader>
<slot :map="map"></slot>
<template v-slot={map}>
</template>
</div> ----> this does not
It seems that when i have scoped slot in scoped slot the third argument of the render function which should be component or element is set to boolean
_c("map-loader", {
ref: "mapLoader",
attrs: { apiKey: _vm.apiKey, mapConfig: _vm.mapConfig },
scopedSlots: _vm._u(
[
....
],
null,
true <-------- this is set wrong
)
Hmmm, since you're not able to reproduce it in Codesandbox, that is going to make it nearly impossible for me to help. I can only guess that maybe your vue-template-compiler version is mis-matched?
Please report back if you can get a minimal reproduction.
sirlancelot
on 12 Apr 2019
You probably have either own code or 3rd party code that was compiled using an outdated version of vue-template-compiler.
yyx990803
on 12 Apr 2019
@yyx990803 @sirlancelot @posva
I had vue-template-compiler version 2.6.6 in my dev dependencies 🤦♂️, Sorry for wasting your time, I will leave you alone now
klimentLambevski
on 12 Apr 2019
No worries, glad it's working! :tada:
sirlancelot
on 12 Apr 2019
Related issues
seemsindie
·
3Comments
julianxhokaxhiu
·
3Comments
guan6
·
3Comments
gkiely
·
3Comments
fergaldoyle
·
3Comments
Most helpful comment
You probably have either own code or 3rd party code that was compiled using an outdated version of
vue-template-compiler.