Skip to content

component is doesn't handle html tags in SSR #1508

@OEvgeny

Description

@OEvgeny

Version

3.0.0-beta.18

    "@vue/compiler-sfc": "^3.0.0-beta.18",
    "@vue/server-renderer": "^3.0.0-beta.18",
    "vue": "^3.0.0-beta.18"

Reproduction link

https://codesandbox.io/s/cranky-vaughan-0u3mi?file=/src/components/HelloWorld.vue

Steps to reproduce

For the given template:

<template>
  ...
  <component
    :is="multiline ? 'textarea' : 'input'"
  />
</template>

In SSR, build produces the following output:

const ssrRender$k = /*#__PURE__*/_withId$d(function ssrRender(_ctx, _push, _parent, _attrs) {
  // ...
  _push(serverRenderer.ssrRenderComponent(vue.resolveDynamicComponent(_ctx.multiline ? 'textarea' : 'input')));
  _push(`<!--]-->`);
});

Which leads to the following error during server-side render:

TypeError: Cannot create property '__props' on string 'input'
    at normalizePropsOptions (appDir\node_modules\.pnpm\@vue\runtime-core@3.0.0-beta.18\node_modules\@vue\runtime-core\dist\runtime-core.cjs.prod.js:1580:30)
    at setFullProps (appDir\node_modules\.pnpm\@vue\runtime-core@3.0.0-beta.18\node_modules\@vue\runtime-core\dist\runtime-core.cjs.prod.js:1498:37)
    at initProps (appDir\node_modules\.pnpm\@vue\runtime-core@3.0.0-beta.18\node_modules\@vue\runtime-core\dist\runtime-core.cjs.prod.js:1409:5)
    at setupComponent (appDir\node_modules\.pnpm\@vue\runtime-core@3.0.0-beta.18\node_modules\@vue\runtime-core\dist\runtime-core.cjs.prod.js:4495:5)
    at renderComponentVNode (appDir\node_modules\.pnpm\@vue\server-renderer@3.0.0-beta.18_vue@3.0.0-beta.18\node_modules\@vue\server-renderer\dist\server-renderer.cjs.prod.js:156:17)
    at Object.ssrRenderComponent (appDir\node_modules\.pnpm\@vue\server-renderer@3.0.0-beta.18_vue@3.0.0-beta.18\node_modules\@vue\server-renderer\dist\server-renderer.cjs.prod.js:444:12)
    at Object.ssrRender (appDir\temp\app.js:1148:24)
    at Object.ssrRender (appDir\node_modules\.pnpm\@vue\runtime-core@3.0.0-beta.18\node_modules\@vue\runtime-core\dist\runtime-core.cjs.prod.js:802:24)
    at renderComponentSubTree (appDir\node_modules\.pnpm\@vue\server-renderer@3.0.0-beta.18_vue@3.renderer@3.0.0-beta.18_vue@3.0.0-beta.18\node_modules\@vue\server-renderer\dist\server-renderer.cjs.prod.js:195:18)                                                                                           nderer@3.0.0-beta.18_vue@3.0.
    at renderComponentVNode (appDir\node_modules\.pnpm\@vue\server-renderer@3.0.0-beta.18_vue@3.0.0-beta.18\node_modules\@vue\server-renderer\dist\server-renderer.cjs.prod.js:165:16)

The exact line causing the eror is in runtime-core.cjs.prod.js:1500:

        return (comp.__props = shared.EMPTY_ARR);

What is expected?

The component renders correctly during SSR

What is actually happening?

The component failed to render with the error above


The repro link shows that the component handles correcly in--browser rendering.
Tried to kick off a repro in codesandbox using SSR, with no luck. Will be happy to provide one if you point me out to an example.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions