在开发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. MDC – Text field

    前言 Angular Material 只有 Form field, 但 Material Design 有份 Text field 和 Form field, Form field 是给 check ...

  2. ASP.NET Core – Handle Error on Web API

    前言 上一篇讲了 ASP.NET Core – Handle Error on Razor Page 这一篇继续说说 Web API 的错误处理. 主要参考 Handle errors in ASP. ...

  3. Git 本地仓库与基础操作指令

    本地仓库 获取本地仓库 在电脑任意位置创建一个空目录(例如test)作为我们的本地Git仓库 进入这个目录中,右键打开Git Bash窗口 执行 git init命令 如果创建成功后可在文件夹下看到隐 ...

  4. 为什么我觉得需要熟悉vim使用,难道仅仅是为了耍酷?

    实例说话: 使用vscode保存,有报提示信息,可以以超级用户身份重试,于是我授权root给vscode软件,却还提示失败! 而实际上,我使用cat命令发现已经写入成功了 终端内使用cat这条shel ...

  5. i mean

    马上教师节了,咱们不给教练整坨大的吗

  6. Adobe Pr 软件报错,此效果需要GPU加速

    事件起因: 某同事使用PR软件报错,报错截图如下:   解决办法: 1.在pr菜单栏选择文件-项目设置-常规-视频渲染和回放-渲染程序,切换到Mercury Playback Engine GPU加速 ...

  7. Java实现随机抽奖的方法有哪些

    在Java中实现随机抽奖的方法,通常我们会使用java.util.Random类来生成随机数,然后基于这些随机数来选择中奖者.以下将给出几种常见的随机抽奖实现方式,包括从数组中抽取.从列表中抽取以及基 ...

  8. 《Vue.js 设计与实现》读书笔记 - 第14章、内建组件和模块

    第14章.内建组件和模块 14.1 KeepAlive 组件的实现原理 KeepAlive 一词借鉴了 HTTP 协议. KeepAlive 组件可以避免组件被频繁的销毁/重建.本质是缓存管理,再加上 ...

  9. 10月《中国数据库行业分析报告》已发布,深度剖析甲骨文大会Oracle技术新趋势

    为了帮助大家及时了解中国数据库行业发展现状.梳理当前数据库市场环境和产品生态等情况,从2022年4月起,墨天轮社区行业分析研究团队出品将持续每月为大家推出最新<中国数据库行业分析报告>,持 ...

  10. dotnet 的LINQ使用

    // LINQ (Language Integrated Qyery) 语言集成查询 -- 用来查询的一些操作类库 // 1. LINQ to Objects 主要负责对象的查询 // 2. LINQ ...