Cannot create property 'default' on boolean 'true'"

[klimentLambevski]

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 }

[posva]

default is a reserved keyword and therefore cannot be used in specific places in JS

[klimentLambevski]

@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 ...

[posva]

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)

[klimentLambevski]

@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

[sirlancelot]

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 {}

[klimentLambevski]

@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

MapLoader
<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
        )

[sirlancelot]

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.

[yyx990803]

You probably have either own code or 3rd party code that was compiled using an outdated version of vue-template-compiler.

[klimentLambevski]

@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

[sirlancelot]

No worries, glad it's working! 🎉