vue ssr error: TypeError: Cannot read property 'replace' of undefined

在开发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) 中：

TemplateRenderer.prototype.getUsedAsyncFiles = function getUsedAsyncFiles (context) {
  if (!context._mappedFiles && context._registeredComponents && this.mapFiles) {
    var registered = Array.from(context._registeredComponents);
    context._mappedFiles = this.mapFiles(registered).map(normalizeFile);
  }
  return context._mappedFiles
};

原因是 this.mapFiles(registered) 中没有匹配到css的sourcemap文件

修改源码过滤掉 undefined 可以解决报错（错误示范）

可以修改 vue.config.js 配置文件（项目由vue cli3/4创建）：

module.exports = {
+  css: {
+    extract: true,
+    sourceMap: true
+  }
};

为css启用sourcemap就行了，问题解决。记得重新build