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

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

Closed
OEvgeny opened this issue Jul 5, 2020 · 0 comments
Closed

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

OEvgeny opened this issue Jul 5, 2020 · 0 comments

Comments

@OEvgeny
Copy link

OEvgeny commented Jul 5, 2020

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\[email protected]\node_modules\@vue\runtime-core\dist\runtime-core.cjs.prod.js:1580:30)
    at setFullProps (appDir\node_modules\.pnpm\@vue\[email protected]\node_modules\@vue\runtime-core\dist\runtime-core.cjs.prod.js:1498:37)
    at initProps (appDir\node_modules\.pnpm\@vue\[email protected]\node_modules\@vue\runtime-core\dist\runtime-core.cjs.prod.js:1409:5)
    at setupComponent (appDir\node_modules\.pnpm\@vue\[email protected]\node_modules\@vue\runtime-core\dist\runtime-core.cjs.prod.js:4495:5)
    at renderComponentVNode (appDir\node_modules\.pnpm\@vue\[email protected][email protected]\node_modules\@vue\server-renderer\dist\server-renderer.cjs.prod.js:156:17)
    at Object.ssrRenderComponent (appDir\node_modules\.pnpm\@vue\[email protected][email protected]\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\[email protected]\node_modules\@vue\runtime-core\dist\runtime-core.cjs.prod.js:802:24)
    at renderComponentSubTree (appDir\node_modules\.pnpm\@vue\[email protected][email protected]@[email protected]\node_modules\@vue\server-renderer\dist\server-renderer.cjs.prod.js:195:18)                                                                                           [email protected][email protected].
    at renderComponentVNode (appDir\node_modules\.pnpm\@vue\[email protected][email protected]\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.

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

No branches or pull requests

2 participants