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

Comments

Projects
None yet
4 participants
@klimentLambevski
Copy link

klimentLambevski commented Apr 11, 2019

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

This comment has been minimized.

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 Apr 11, 2019

@klimentLambevski

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

Copy link
Author

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

@sirlancelot

This comment has been minimized.

Copy link
Contributor

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

This comment has been minimized.

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

This comment has been minimized.

Copy link
Contributor

sirlancelot commented Apr 12, 2019

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

This comment has been minimized.

Copy link
Member

yyx990803 commented Apr 12, 2019

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

@klimentLambevski

This comment has been minimized.

Copy link
Author

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

@sirlancelot

This comment has been minimized.

Copy link
Contributor

sirlancelot commented Apr 12, 2019

No worries, glad it's working! 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.