在开发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. JavaScript – 用 Generator 运行异步函数 & await async

    前言 上一篇 JavaScript – Promise 介绍了如何用 JS 编写可读性高的异步函数. 但其实呢, Promise 还不是最好的. 在 es6 之前, Promise 比起回调地狱是好了 ...

  2. 教你一招,测试人员如何通过AI提高工作效率!

    伴随着AI技术的兴起,像OpenAI推出的ChatGPT.Microsoft发布的Microsoft 365 Copilot.阿里的通义千问.百度的文心一言.华为的盘古大模型等.很多测试人员开始担心, ...

  3. Python:条件分支 if 语句全讲解

    Python:条件分支 if 语句全讲解 如果我拿出下面的代码,阁下该做何应对? if not reset_excuted and (terminated or truncated): ... els ...

  4. 存储事件 storage

    // 去手动删除本地存储触发存储事件 window.addEventListener('storage', function () { console.log('存储事件触发了') }) const ...

  5. CSharp的@microsoft/signalr实时通信教程 - 前端 vue

    1. 安装@microsoft/signalr pnpm install @microsoft/signalr --save signalr 是微软对 websocket技术的封装,优化了操作 :1. ...

  6. 新建 Blazor 项目 WebAssembly

  7. Vue3的生命周期函数

        选项式 API 组合式API beforeCreate 不需要 created  不需要 beforeMount onBeforeMount mounted onMounted beforeU ...

  8. day16-break,continue,goto

    break,continue,goto break在任何循环语句的主体部分,均可用break控制循环的流程.break用于强行退出循环,不执行循环中剩余的语句.(break语句也在switch选择语句 ...

  9. Windows 使用 Mingw-w64 配置GCC套件

    Mingw-w64里的gcc和g++应该是很多人常用的编译工具.但是他的下载资源很乱,不好找(注意:MinGW和MinGW-w64是同宗同源的两款软件!),要么就是版本太老.SourceForge上有 ...

  10. C++ mutable与常对象语义详解

    摘编自 <Effective C++> 条款三. "成员函数如果是const" 或者 "一个对象是const对象"到底意味什么?有两个流行概念:bi ...