在开发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. 【学习笔记】状压DP

    状态压缩DP 对于一个集合,他一有\(2^n\)个子集,而状态压缩就是枚举这些子集,每一个状态就是一个由\(01\)构成的集合,如果为\(0\)就表示不选当前的元素,否则就表示选.因为状态压缩将每一个 ...

  2. DatetimeFormatter字符串转日期

    在Java中,我们经常需要将字符串形式的日期时间转换为LocalDateTime.LocalDate.LocalTime等日期时间对象,或者将日期时间对象转换为字符串.为了完成这些操作,我们可以使用D ...

  3. Servlet——idea创建Servlet模板

    idea创建Servlet模板   以前新建一个Servlet是通过新建一个Class文件   可以直接新建一个idea内的Servlet模板                    可以通过设置 更改 ...

  4. 系统编程-文件IO-fcntl系统调用

    原型: #include <unistd.h> #include <fcntl.h> int fcntl(int fd, int cmd, ... /* arg */ ); 功 ...

  5. 【赵渝强老师】使用MongoDB的命令行工具:mongoshell

    一.启动mongo shell 安装好MongoDB后,直接在命令行终端执行下面的命令: mongo 如下图所示: 可选参数如下: 也可以简写为: 在mongo shell中使用外部编辑器,如:vi, ...

  6. /proc/vmalloc

    root@pita2_mr813_tina35:/# cat /proc/vmallocinfo 0xffffff80007d0000-0xffffff8000902000 1253376 load_ ...

  7. Windows10 安装使用 Docker

    Windows10 安装使用 Docker 下载安装 Docker Desktop https://docs.docker.com/docker-for-windows/install/ 点击运行 D ...

  8. 题解:AT_abc374_d [ABC374D] Laser Marking

    题目传送门 luogu观看 思路 注意一下数据范围. \(1 \le n \le 6\) 首先想到 dfs. 按照题意,先算出位置到线段的一段所需的时间. 再算出画线段所需的时间,就行了. 输出后发现 ...

  9. PowerPoint 修改默认导出图片的大小

    1.运行rededit打开注册表编辑器 2.找到HKEY_CURRENT_USER\Software\Microsoft\Office\16.0\PowerPoint\Options 3.其中不同Of ...

  10. 手写js new,new的过程到底发生了什么

    在JavaScript中,new关键字的应用可以说是再平常不过了,最基础的有new Array().new Set(),再而就是new一个自己创建的构造函数,也就是创建一个该构造函数的示例.如:var ...