Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
klimentLambevski opened this issue Apr 11, 2019 · 10 comments
Closed

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

klimentLambevski opened this issue Apr 11, 2019 · 10 comments

Comments

@klimentLambevski
Copy link

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
Copy link
Member

posva commented Apr 11, 2019

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

@posva posva closed this as completed Apr 11, 2019
@klimentLambevski
Copy link
Author

klimentLambevski commented Apr 11, 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 ...

@posva
Copy link
Member

posva commented Apr 11, 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)

@klimentLambevski
Copy link
Author

@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
Copy link

sirlancelot commented Apr 11, 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 {}

@klimentLambevski
Copy link
Author

klimentLambevski commented Apr 11, 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

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
Copy link

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
Copy link
Member

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

@klimentLambevski
Copy link
Author

@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
Copy link

No worries, glad it's working! 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants