Subscribe on changes!

[Vue warn]: SSR-optimized slot function detected in a non-SSR-optimized render function. You need to mark this component with $dynamic-slots in the parent template.

scope: ssr
avatar
Coder911th
Jan 8th 2021

Version

3.0.5

Reproduction link

https://github.com/Coder911th/ssr-slots-warning

Steps to reproduce

  1. Clone the repository
git clone git@github.com:Coder911th/ssr-slots-warning.git && cd ssr-slots-warning
  1. Install dependencies
npm i
  1. Run client build (entry point ./src/client.js)
npm run client:build
  1. Run server build (entry point ./src/ssr.js)
npm run ssr:build
  1. Start the server on port 3333
npm run ssr:start
  1. Open home page using SSR
http://localhost:3333
  1. In server console:
GET /
[Vue warn]: SSR-optimized slot function detected in a non-SSR-optimized render function. You need to mark this component with $dynamic-slots in the parent template.
[Vue warn]: SSR-optimized slot function detected in a non-SSR-optimized render function. You need to mark this component with $dynamic-slots in the parent template.

Server sent markup:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="icon" type="image/png" href="/favicon.png">
        <title>Demo App</title>
    </head>
    <body>
        <div id="root">
            <div>
                <h1>Index</h1>
                <div>
                    <a href="/test-vue-router" class="">
                    <!--[-->
                    Vue Router Link 
                    <!--]-->
                    </a>
                </div>
                <div>
                    <a href="https://v3.vuejs.org/">
                    <!--[-->
                    <!--]-->
                    </a>
                </div>
                <div>
                    <div>
                    <!--[-->
                    <!--]-->
                    </div>
                </div>
            </div>
        </div>
        <script src="/resources/app.js"></script>
    </body>
</html>

Second and third VLink did not render default slot on server.

Page component: https://github.com/Coder911th/ssr-slots-warning/blob/main/src/pages/Index.vue

VLink component: https://github.com/Coder911th/ssr-slots-warning/blob/main/src/components/VLink.vue

Based on the warning text in the console, it is not clear what needs to be done to fix the error.

Didn't find anywhere in the documentation mentioning the use of $dynamic-slots.

What is expected?

Server render default slot of second and third VLink on the server.

What is actually happening?

Second and third VLink did not render default slot on server.

The console displays the following message:

[Vue warn]: SSR-optimized slot function detected in a non-SSR-optimized render function. You need to mark this component with $dynamic-slots in the parent template.
[Vue warn]: SSR-optimized slot function detected in a non-SSR-optimized render function. You need to mark this component with $dynamic-slots in the parent template.

Probably the problem is somewhere here:

https://github.com/vuejs/vue-next/blob/master/packages/runtime-core/src/helpers/renderSlot.ts#L33

Do not understand why sometimes slot.length > 1.

Also, the problem is probably related to the dynamic components:

<component :is="..."/>
6
avatar
basmilius
Feb 4th 2021

Also having this problem in components that have multiple slots. If it helps, one of the slots is inside a teleport. I wonder how to mark a template with $dynamic-slots and which template...

avatar
yyx990803
May 18th 2022

Can no longer reproduce - closing as stale

GitHub Track