在开发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. Time Zone, Leap Year, Date Format, Epoch Time 时区, 闰年, 日期格式

    前言 以前有写过一篇了, 但很乱, 这篇就作为它的整理版吧. Leap Year 闰年 闰年是指那些有 366 天, 二月份有 29号 的年份. 比如 2020年 有 2月29日, 所以 2020 就 ...

  2. ModbusRTU通信协议报文剖析

    前言 大家好!我是付工.前面给大家介绍了Modbus协议的应用层面.终于有人把Modbus说明白了那么,今天跟大家聊聊关于Modbus协议报文的那些事. 一.真实案例 前段时间有个粉丝朋友,让我帮他解 ...

  3. ubuntu16.04安装SSH服务

    第一步:查看SSH服务是不是安装 sudo ps -e |grep ssh 如果啥都没看到,恭喜你,你没装ssh.那就开始下面的步骤. 第二步:安装SSH sudo apt-get install o ...

  4. vue前端开发仿钉图系列(6)左侧记事本的开发详解

    在页面开发中,深深的被element组件所吸引,里面很多小组件都可以直接使用.像是记事本提示.记事本列表时间线.右侧编辑页面的form表单,编辑和查看状态的切换等等,比之前iOS原生开发所有的东西都要 ...

  5. iOS 数据持久化方案-Realm的使用小结

    一.Realm介绍 1.1.Realm是一个跨平台移动数据库引擎,支持iOS.OS X(Objective-C和Swift)以及Android,核心数据引擎C++打造,并不是建立在SQLite之上的O ...

  6. 云原生爱好者周刊:KubeSphere 3.3.0 Alpha 版发布

    开源项目推荐 Collection of Linux eBPF slides/documents 这个项目收集了各种与 eBPF 相关的资料,非常全面. magic-trace magic-trace ...

  7. 在 Kubernetes 中部署并使用 KubeEdge

    作者:马伟,青云科技容器顾问,云原生爱好者,目前专注于云原生技术,云原生领域技术栈涉及 Kubernetes.KubeSphere.KubeKey 等. 边缘计算在广泛制造业.工业.零售和金融等行业, ...

  8. Java消息队列入门详解

    什么是消息队列? 消息队列的产生主要是为了解决系统间的异步解耦与确保最终一致性.在实际应用场景中,往往存在一些主流程操作和辅助流程操作,其中主流程需要快速响应用户请求,而辅助流程可能涉及复杂的处理逻辑 ...

  9. JetBrains IDEs 软件全破解

    JetBrains IDE相关产品是一系列专为不同编程语言和平台设计的智能开发工具,它们可以帮助开发者提高效率,编写高质量的代码,和享受编程的乐趣.为当世最有影响力的IDE之一. JB 软件分为都分为 ...

  10. MaekLogic笔记 _001 _CURD_20210826

    MaekLogic笔记 _001 _CURD _20210826 1.插入文档 API xdmp:document-insert( $uri as xs:string, $root as node() ...