在开发vue ssr应用时, yarn build  yarn start 之后启动正常:

info Server running at: http://0.0.0.0:6606

在访问页面时,发现页面降级到SPA,服务端报错:

debug Server rendering encountered an error: { TypeError: Cannot read property 'replace' of undefined }

经过排查,错误出在 vue-server-renderer(v2.6.11) 中:

9081 TemplateRenderer.prototype.getUsedAsyncFiles = function getUsedAsyncFiles (context) {
9082 if (!context._mappedFiles && context._registeredComponents && this.mapFiles) {
9083 var registered = Array.from(context._registeredComponents);
9084 context._mappedFiles = this.mapFiles(registered).map(normalizeFile);
9085 }
9086 return context._mappedFiles
9087 };

原因是 this.mapFiles(registered) 中没有匹配到css的sourcemap文件

修改源码过滤掉 undefined 可以解决报错(错误示范)

可以修改 vue.config.js 配置文件(项目由vue cli3/4创建):

module.exports = {
+ css: {
+ extract: true,
+ sourceMap: true
+ }
};

为css启用sourcemap就行了,问题解决。记得重新build

vue ssr error: TypeError: Cannot read property 'replace' of undefined的更多相关文章

  1. underscore.js定义模板遇到问题:Uncaught TypeError: Cannot read property 'replace' of undefined

    代码正确缩进位置如下, extend "layout" block 'content',-> div ->'nihao' script id:"Invoice ...

  2. vue报错TypeError: Cannot read property 'protocol' of undefined

    错误信息如下所示: isURLSameOrigin.js?3934:57 Uncaught (in promise) TypeError: Cannot read property 'protocol ...

  3. Appium dmg 安装:[TypeError: Cannot read property 'replace' of undefined]

    问题原因:appium dmg 版本没有默认node.js 解决方案:安装稳定版的node.js.(官网下载安装即可.) 验证:命令行输入:node -v  查看版本号 npm -v  查看版本号

  4. vue报错TypeError: Cannot read property '$createElement' of undefined

    报错截图: 这个错误就是路由上的component写成了components

  5. ngzorro draw 第一次打开 ERROR TypeError: Cannot read property 'overlayElement' of undefined

    at NzDrawerComponent.push../node_modules/ng-zorro-antd/fesm5/ng-zorro-antd.js.NzDrawerComponent.trap ...

  6. TypeError: Cannot read property 'compilation' of undefined

    Vue build失败 TypeError: Cannot read property 'compilation' of undefined 1.   使用npm run build 失败 使用npm ...

  7. Vue使用Typescript开发编译时提示“ERROR in ./src/main.ts Module build failed: TypeError: Cannot read property 'afterCompile' of undefined”的解决方法

    使用Typescript开发Vue,一切准备就绪.但npm start 时,提示“ ERROR in ./src/main.tsModule build failed: TypeError: Cann ...

  8. [Vue warn]: Error in render: "TypeError: Cannot read property '0' of undefined、vuejs路由使用的问题Error in render function

    1.[Vue warn]: Error in render: "TypeError: Cannot read property '0' of undefined 注意,只要出现Error i ...

  9. SharePoint 2013 Error - TypeError: Unable to get property 'replace' of undefined or null reference

    错误信息 TypeError: Unable to get property ‘replace’ of undefined or null referenceTypeError: Unable to ...

  10. vue v-if:"TypeError: Cannot read property 'length' of undefined"

    在使用v-if判断一个数组大小为0时,会出现 length 是undefined的错误:[Vue warn]: Error in render: "TypeError: Cannot rea ...

随机推荐

  1. opencascade源码学习之HLRAlgo包 -HLRAlgo

    类 HLRAlgo 前言 在给定的投影中,为了达到工业设计.图纸需要的精度,可以删除隐藏的线条.为此,隐藏 线路移除组件提供两个算法: HLRBRep_Algo和HLRBRep_PolyAlgo. 这 ...

  2. debian 12 编译 vlc/libvlc 支持 rtsp

    debian 官方从11开始,不再提供支持 rtsp 的 VLC deb 包,通过 libvlc 播放 rtsp 也无法实现,因此需要自己编译. # 安装编译环境,编译依赖库以及 contrib 第三 ...

  3. ptmalloc、tcmalloc与jemalloc对比分析

    背景介绍 在开发微信看一看期间,为了进行耗时优化,基础库这层按照惯例使用tcmalloc替代glibc标配的ptmalloc做优化,CPU消耗和耗时确实有所降低.但在晚上高峰时期,在CPU刚刚超过50 ...

  4. CPU缓存伪共享

    CPU缓存什么东西?当然这个问题很多人有可能觉得比较傻,CPU缓存什么,肯定是缓存数据(代码)啊,要不然还能缓存啥,这个确实没问题,但是CPU到底缓存什么样的数据呢?因为对CPU来说,无论是指令,还是 ...

  5. 调查报告解读之国外数据库篇:MySQL国内使用率第一,多少企业有意替换国外产品?

    为了解数据库行业以及从业人员的现状.数据库选型.中国数据库的发展趋势等,墨天轮于2022年开始进行问卷收集,历时24天,共征集到有效问卷3476份,并于2月10日整理发布了<2022年墨天轮数据 ...

  6. 5. 介绍CSS层级

    层级的大小使用 z-inde 来定义,层级大的会覆盖层级小的 : 举个例子,我们设计弹窗的时候,会涉及三个层面,我们把遮罩层mask放在第二层,把弹窗内容放在第一层 ,页面内容显示在第三层:

  7. 64.element表单校验注意点

    <!-- 表单验证三要素: --> <!-- ① el-form需要有 model属性[表单数据对象].rules属性[验证规则对象].ref属性[引用字符串] --> < ...

  8. 0404-Tensor的持久化和向量化

    0404-Tensor的持久化和向量化作 目录 一.持久化 1.1 保存模型 1.2 加载模型 二.向量化 三.注意事项 四.第四章总结 pytorch完整教程目录:https://www.cnblo ...

  9. AI实战篇:Spring AI + 混元 手把手带你实现企业级稳定可部署的AI业务智能体

    前言 在之前的内容中,我们详细讲解了Spring AI的基础用法及其底层原理.如果还有小伙伴对此感到困惑,欢迎参考下面这篇文章,深入学习并进一步掌握相关知识:https://www.cnblogs.c ...

  10. mini-web 框架添加路由

    阅读目录 1.mini web框架-4-路由 2.伪静态.静态和动态的区别 3.mini-web框架-实现伪静态url 4.准备股票数据 5.mini-web框架-从mysql中查询数据 6.mini ...