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