SSR报错[@vue/server-renderer] Invalid VNode type: Symbol(Fragment) (symbol)

SSR报错[@vue/server-renderer] Invalid VNode type: Symbol(Fragment) (symbol)

当ssr组件中使用v-for的时候会报错,我大概查了下这就是个官方的issue:

https://github.com/vuejs/core/issues/2600

大概意思就是有2个vue,核心报错的源码开发环境下在源码里的:

server-rendr.cjs.js

function renderVNode(push, vnode, parentComponent, slotScopeId) {
    const { type, shapeFlag, children } = vnode;
    switch (type) {
        case vue.Text:
            push(shared.escapeHtml(children));
            break;
        case vue.Comment:
            push(children ? `<!--${shared.escapeHtmlComment(children)}-->` : `<!---->`);
            break;
        case vue.Static:
            push(children);
            break;
        case vue.Fragment:
            if (vnode.slotScopeIds) {
                slotScopeId =
                    (slotScopeId ? slotScopeId + ' ' : '') + vnode.slotScopeIds.join(' ');
            }
            push(`<!--[-->`); // open
            renderVNodeChildren(push, children, parentComponent, slotScopeId);
            push(`<!--]-->`); // close
            break;
        default:
            if (shapeFlag & 1 /* ELEMENT */) {
                renderElementVNode(push, vnode, parentComponent, slotScopeId);
            }
            else if (shapeFlag & 6 /* COMPONENT */) {
                push(renderComponentVNode(vnode, parentComponent, slotScopeId));
            }
            else if (shapeFlag & 64 /* TELEPORT */) {
                renderTeleportVNode(push, vnode, parentComponent, slotScopeId);
            }
            else if (shapeFlag & 128 /* SUSPENSE */) {
                renderVNode(push, vnode.ssContent, parentComponent, slotScopeId);
            }
            else {
                vue.warn('[@vue/server-renderer] Invalid VNode type:', type, `(${typeof type})`);
            }
    }
}


断点看了下,v-for时的shapeflag为16,这里无法解析

老师也可以帮忙看下一起看下这个问题


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
张轩 2022-01-28 09:06:01

同学你好 请问你这个问题是否和我们的代码相关 还是另外的代码库?

看错误就是两个 vue 版本的问题,之前我们将组件库的时候也描述了这个错误。

后端有 vue 依赖以后,前端的库就不要添加 vue 依赖,或者改成 peerDeps。避免下载两个不同版本的 vue。

  • 提问者 amurocrash #1
    前端的devDependencies里也要删除vue?
    2022-01-28 09:40:35
  • 提问者 amurocrash #2
    LegoComponents的dev依赖里是有vue的
    2022-01-28 09:44:03
  • 提问者 amurocrash #3
    试了下,lego-components里面打包出来一样有vue,一样会有问题
    2022-01-28 10:24:00
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

登录后可查看更多问答,登录/注册

请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师