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

Unexpected "duplicate presence of slot" #7913

Closed
Kelin2025 opened this issue Mar 28, 2018 · 9 comments
Closed

Unexpected "duplicate presence of slot" #7913

Kelin2025 opened this issue Mar 28, 2018 · 9 comments

Comments

@Kelin2025
Copy link

@Kelin2025 Kelin2025 commented Mar 28, 2018

Version

2.5.2

Reproduction link

https://codesandbox.io/s/mzvkppmvo8

Steps to reproduce

  1. I created component with scoped slot (AppSwitcher.vue)
  2. Then I use it in another component with their own slot (HelloWorld.vue with slot "subtext")
  3. Add some element to slot (div in App.vue)

What is expected?

It should work without errors

What is actually happening?

Changes in AppSwitcher.vue caus "Duplicate presence of slot "subtext" found in the same render tree" error but there are no duplicates.


Also, adding slot-scope to div in App.vue solves problem and no error there, but why it happens without slot-scope?

@mbj36
Copy link

@mbj36 mbj36 commented Mar 28, 2018

Hello @Kelin2025

In v2.5, there was some changes in scoped-slot, you can go through them here - https://gist.github.com/yyx990803/9bdff05e5468a60ced06c29c39114c6b#simplified-scoped-slots-usage

This might solve your confusion

@Kelin2025
Copy link
Author

@Kelin2025 Kelin2025 commented Mar 28, 2018

Yeah, I know it, but I don't really understand why I get this error, there are no duplicates of slot but only rerender.

@posva posva added the bug label Mar 30, 2018
@Justineo
Copy link
Member

@Justineo Justineo commented Apr 2, 2018

It looks like a slot inside a scoped slot is rendered more than once.

@Kelin2025
Copy link
Author

@Kelin2025 Kelin2025 commented Apr 2, 2018

@Justineo it's being re-rendered on changes but it shouldn't cause problems, I think 🤔

@antoinerey
Copy link

@antoinerey antoinerey commented Apr 12, 2018

My 2 cents.

Here is another reproduction of this issue (https://codesandbox.io/s/m5kl6p97qx). Notice the warning being raised only once the modal is shown more than once.

On the other hand, the JSX version of the same component is not raising any warning (https://codesandbox.io/s/k0wpj60z5r).

@mpbarlow
Copy link

@mpbarlow mpbarlow commented May 22, 2018

I'm experiencing the same thing. Anything that triggers a re-render inside the slot-scope causes a warning about duplicate slot presence.

The issue seems to be here on this line here. Once the slots have been rendered once, subsequent executions of that block have slotNodes._rendered as true, presumably from the first render.

I would imagine something should be setting that back to false when a re-render is triggered, but admittedly I know almost nothing about how Vue works under the hood so that's just a wild guess.

This bug seems like an unlikely edge case but it's happened to me a couple of times recently. I'm a big fan of the pattern of writing renderless components that can be paired with concrete implementations, and trying to pass the content from the consumer into the concrete implementation is when this issue is arising.

mpbarlow added a commit to mpbarlow/vue that referenced this issue May 26, 2018
…lot-scope

Because slotNodes inside a slot-scope context are already set to _rendered = true after initial
render, the warning for duplicate slot presence always fires when a slot-scope prop change triggers
a re-render. With this change, the compiler tracks whether any slot-scoped elements have been
encountered at the point the slot is compiled. If so, the direct ancestors of the slot are checked
for slot-scope presence, and if found, the warning is supressed. This is admittedly not a perfect
solution, as within a slot-scope context the warning now does not fire even when there _are_
duplicate slots, but I couldn't find a good way to get around that.

fix vuejs#7913
@sodatea sodatea added the has PR label Jun 11, 2018
@bobliaos
Copy link

@bobliaos bobliaos commented Aug 8, 2018

try this:
my-component:

<template>
    <slot :someprop="value"></slot>
</template>

app:

<my-component>
    <template slot-scop="someprop">{{ prop }} ... and do something else</template>
</my-component>

especially when "slot" in "v-for"

@mikermcneil
Copy link

@mikermcneil mikermcneil commented Sep 13, 2018

Note that if you're using Vue.js ≤v2.4.x, then you may see this error if you are trying to use slot-scope (that's what was going on for me).

The solution is to either update Vue.js to ≥2.5 OR use "scope" instead of "slot-scope":

image
https://vuejs.org/v2/api/#scope-replaced

Hope that helps anyone else finding this on google like I did!


PS. If you're using Vue.js ≤v2.4.x, remember that you'll need to use a <template> element -- you can't just put a slot scope boundary on any miscellaneous element until ≥2.5.x. A little real-world example:

      <div class="form-group col-md">
        <label>Autocomplete field 4 (w/ custom search results):</label>
        <autocomplete v-model="autocompleteExampleValue4" action="listGlobalSearchResults" :handle-formatting-response-data="handleFormattingDummySearchResults" placeholder="This one has a custom placeholder too">
          <template slot="search-result-item" scope="slotData"><!-- Note that you can use destructuring here, but it only works in modern browsers -- otherwise you have to define a separate variable -- like scope="slotData" and then use {{slotData.id}}... (see https://vuejs.org/v2/guide/components-slots.html#Destructuring-slot-scope) -->
            <!-- TODO: update to vue ≥ 2.5.0 to allow this slotData thing to be attached w/o using a template element.  Also when we do that, "scope" will become "slot-scope".  See https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots for more info -->
            <span>{{slotData.searchResult.label}}</span>
          </template>
        </autocomplete>
      </div>
@tesla3327

This comment was marked as spam.

@vuejs vuejs deleted a comment from yozman Oct 1, 2018
@vuejs vuejs deleted a comment from maoberlehner Oct 1, 2018
@yyx990803 yyx990803 closed this in 530ca1b Dec 2, 2018
f2009 pushed a commit to f2009/vue that referenced this issue Jan 25, 2019
This also removes the restrictions on rendering the same slot multiple
times.

close vuejs#7913
erdong-fe pushed a commit to erdong-fe/vue that referenced this issue May 2, 2020
This also removes the restrictions on rendering the same slot multiple
times.

close vuejs#7913
aJean added a commit to aJean/vue that referenced this issue Aug 19, 2020
This also removes the restrictions on rendering the same slot multiple
times.

close vuejs#7913
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

10 participants