在开发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. Angular 学习笔记 (消毒 sanitizer)

    refer : https://www.intricatecloud.io/2019/10/using-angular-innerhtml-to-display-user-generated-cont ...

  2. Servlet——简介

    Servlet    快速入门   1.创建web项目,导入Servlet依赖坐标 <dependencies> <dependency> <groupId>jav ...

  3. 交通网络分析性能再升级,SuperMap iServer新增开启SSC分析模型

    导语 SSC分析模型,全名SuperMap Short Cut,底层采用Contraction Hierarchies(简称CH)算法,该算法旨在通过对图形进行预处理和优化来降低最佳路径分析的时间复杂 ...

  4. php中的跳转

    php中的跳转 header("refresh:3;url=http://www.baidu.com";); <meta http-equiv='refresh' conte ...

  5. 前端工程化解决方案webpack使用小结

    前端工程化解决方案webpack,模块化.组件化.规范化.自动化,使得前端开发更加高效. 功能:代码压缩混淆.处理浏览器端js的兼容性.以模块化的方式处理项目中的资源 webpack插件:clean- ...

  6. iOS关于高德地图定位和热点搜索使用小结

    最近项目刚刚忙完,有空整理一下用到的相关技术点.地图是比较常见的功能模块,现在用的比较多的是地图当前位置显示,公交.骑行.步行路线信息,附近热点位置搜索.现在国内用的比较多的是高德.百度,国外的话可以 ...

  7. webapi action 参数

    使用地址参数传递(queryString)数据:eg:http://localhost:5063/WeatherForecast?age=123 /// <summary> /// GET ...

  8. 解决 WebSocketClient.js?5586:16 WebSocket connection to 'ws://192.168.13.25:8080/ws' failed:

    控制台报错: vue.config.js Vue的配置文件 const { defineConfig } = require('@vue/cli-service') module.exports = ...

  9. vue 中 slot 的使用方式,以及作用域插槽的用法

    分类:插槽又分为匿名插槽.具名插槽以及作用域插槽 : 匿名插槽,我们又可以叫它单个插槽或者默认插槽 因为组件标签中间是不允许写内容的,但是可以插入 插槽 :template 标签 : 插槽的使用方法 ...

  10. Redis实现幂等、防抖、限流等功能

    本文章主要讲述如何使用Redis实现幂等.防抖.限流等功能. 幂等组件 import lombok.RequiredArgsConstructor; import org.springframewor ...