fix: ignore trailing slash in static payloads manifest (#8794)

packages/config/package.json

@@ -18,7 +18,7 @@
     "lodash": "^4.17.20",
     "rc9": "^1.2.0",
     "std-env": "^2.2.1",
-    "ufo": "^0.6.2"
+    "ufo": "^0.6.4"
   },
   "publishConfig": {
     "access": "public"

packages/generator/package.json

@@ -15,7 +15,8 @@
     "devalue": "^2.0.1",
     "fs-extra": "^9.1.0",
     "html-minifier": "^4.0.0",
-    "node-html-parser": "^2.1.0"
+    "node-html-parser": "^2.1.0",
+    "ufo": "^0.6.4"
   },
   "publishConfig": {
     "access": "public"

packages/generator/src/generator.js

@@ -6,6 +6,7 @@ import fsExtra from 'fs-extra'
 import defu from 'defu'
 import htmlMinifier from 'html-minifier'
 import { parse } from 'node-html-parser'
+import { withTrailingSlash, withoutTrailingSlash } from 'ufo'
 
 import { isFullStatic, flatRoutes, isString, isUrl, promisifyRoute, urlJoin, waitFor, requireModule } from '@nuxt/utils'
 
@@ -31,7 +32,7 @@ export default class Generator {
     if (this.isFullStatic) {
       const { staticAssets, manifest } = this.options.generate
       this.staticAssetsDir = path.resolve(this.distNuxtPath, staticAssets.dir, staticAssets.version)
-      this.staticAssetsBase = urlJoin(this.options.app.cdnURL || '/', this.options.generate.staticAssets.versionBase)
+      this.staticAssetsBase = urlJoin(this.options.app.cdnURL, this.options.generate.staticAssets.versionBase)
       if (manifest) {
         this.manifest = defu(manifest, {
           routes: []
@@ -295,8 +296,8 @@ export default class Generator {
     let html
     const pageErrors = []
 
-    if (this.options.router && this.options.router.trailingSlash && route[route.length - 1] !== '/') {
+    if (this.options.router && this.options.router.trailingSlash) {
-      route = route + '/'
+      route = withTrailingSlash(route)
     }
 
     const setPayload = (_payload) => {
@@ -349,7 +350,7 @@ export default class Generator {
         }
         // Add route to manifest (only if no error and redirect)
         if (this.manifest && (!res.error && !res.redirected)) {
-          this.manifest.routes.push(route)
+          this.manifest.routes.push(withoutTrailingSlash(route))
         }
       }
 

packages/server/package.json

@@ -24,7 +24,7 @@
     "serve-placeholder": "^1.2.3",
     "serve-static": "^1.14.1",
     "server-destroy": "^1.0.1",
-    "ufo": "^0.6.2"
+    "ufo": "^0.6.4"
   },
   "publishConfig": {
     "access": "public"

packages/utils/package.json

@@ -19,7 +19,7 @@
     "serialize-javascript": "^5.0.1",
     "signal-exit": "^3.0.3",
     "ua-parser-js": "^0.7.23",
-    "ufo": "^0.6.2"
+    "ufo": "^0.6.4"
   },
   "publishConfig": {
     "access": "public"

packages/utils/src/route.js

@@ -208,7 +208,7 @@ export const createRoutes = function createRoutes ({
       if (trailingSlash && !route.path.endsWith('*')) {
         route.path = withTrailingSlash(route.path)
       } else {
-        route.path = withoutTrailingSlash(route.path) || '/'
+        route.path = withoutTrailingSlash(route.path)
       }
     }
 

packages/vue-app/package.json

@@ -14,7 +14,7 @@
   ],
   "dependencies": {
     "node-fetch": "^2.6.1",
-    "ufo": "^0.6.2",
+    "ufo": "^0.6.4",
     "unfetch": "^4.2.0",
     "vue": "^2.6.12",
     "vue-client-only": "^2.0.0",

packages/vue-app/template/App.js

@@ -304,16 +304,12 @@ export default {
       if (base && route.startsWith(base)) {
         route = route.substr(base.length)
       }
-      let path = parsePath(route).pathname
+      return withoutTrailingSlash(parsePath(route).pathname)
-      <% if (!nuxtOptions.router.trailingSlash) { %>
-        path = withoutTrailingSlash(path)
-      <% } %>
-      return path || '/'
     },
     getStaticAssetsPath(route = '/') {
       const { staticAssetsBase } = window.<%= globals.context %>
 
-      return urlJoin(staticAssetsBase, withoutTrailingSlash(this.getRoutePath(route)))
+      return urlJoin(staticAssetsBase, this.getRoutePath(route))
     },
     <% if (nuxtOptions.generate.manifest) { %>
       async fetchStaticManifest() {
@@ -325,17 +321,17 @@ export default {
       this._fetchCounters = {}
     },
     async fetchPayload(route, prefetch) {
+      const path = decode(this.getRoutePath(route))
       <% if (nuxtOptions.generate.manifest) { %>
       const manifest = await this.fetchStaticManifest()
-      const path = this.getRoutePath(route)
+      if (!manifest.routes.includes(path)) {
-      if (!manifest.routes.includes(decodeURI(path))) {
         if (!prefetch) { this.setPagePayload(false) }
         throw new Error(`Route ${path} is not pre-rendered`)
       }
       <% } %>
       const src = urlJoin(this.getStaticAssetsPath(route), 'payload.js')
       try {
-        const payload = await window.__NUXT_IMPORT__(decodeURI(route), normalizeURL(src))
+        const payload = await window.__NUXT_IMPORT__(path, normalizeURL(src))
         if (!prefetch) { this.setPagePayload(payload) }
         return payload
       } catch (err) {

packages/vue-app/template/client.js

@@ -50,7 +50,7 @@ const NUXT = window.<%= globals.context %> || {}
 
 const $config = NUXT.config || {}
 if ($config.app) {
-  __webpack_public_path__ = urlJoin($config.app.cdnURL || '/', $config.app.assetsPath)
+  __webpack_public_path__ = urlJoin($config.app.cdnURL, $config.app.assetsPath)
 }
 
 Object.assign(Vue.config, <%= serialize(vue.config) %>)<%= isTest ? '// eslint-disable-line' : '' %>

packages/vue-app/template/server.js

@@ -102,7 +102,7 @@ export default async (ssrContext) => {
   // Public runtime config
   ssrContext.nuxt.config = ssrContext.runtimeConfig.public
   if (ssrContext.nuxt.config.app) {
-    __webpack_public_path__ = joinURL(ssrContext.nuxt.config.app.cdnURL || '/', ssrContext.nuxt.config.app.assetsPath)
+    __webpack_public_path__ = joinURL(ssrContext.nuxt.config.app.cdnURL, ssrContext.nuxt.config.app.assetsPath)
   }
   // Create the app definition and the instance (created for each request)
   const { app, router<%= (store ? ', store' : '') %> } = await createApp(ssrContext, { ...ssrContext.runtimeConfig.public, ...ssrContext.runtimeConfig.private })

packages/vue-renderer/package.json

@@ -14,7 +14,7 @@
     "fs-extra": "^9.1.0",
     "lodash": "^4.17.20",
     "lru-cache": "^5.1.1",
-    "ufo": "^0.6.2",
+    "ufo": "^0.6.4",
     "vue": "^2.6.12",
     "vue-meta": "^2.4.0",
     "vue-server-renderer": "^2.6.12"

packages/vue-renderer/src/renderer.js

@@ -310,7 +310,7 @@ export default class VueRenderer {
   }
 
   get resourceMap () {
-    const publicPath = urlJoin(this.options.app.cdnURL || '/', this.options.app.assetsPath)
+    const publicPath = urlJoin(this.options.app.cdnURL, this.options.app.assetsPath)
     return {
       clientManifest: {
         fileName: 'client.manifest.json',

packages/vue-renderer/src/renderers/ssr.js

@@ -210,10 +210,7 @@ export default class SSRRenderer extends BaseRenderer {
         // Page level payload.js (async loaded for CSR)
         const payloadPath = urlJoin(url, 'payload.js')
         const payloadUrl = urlJoin(staticAssetsBase, payloadPath)
-        let routePath = parsePath(url).pathname // remove query params
+        const routePath = withoutTrailingSlash(parsePath(url).pathname)
-        if (!this.options.router.trailingSlash) {
-          routePath = withoutTrailingSlash(routePath) || '/'
-        }
         const payloadScript = `__NUXT_JSONP__("${routePath}", ${devalue({ data, fetch, mutations })});`
         staticAssets.push({ path: payloadPath, src: payloadScript })
         preloadScripts.push(payloadUrl)

yarn.lock

@@ -12995,10 +12995,10 @@ ua-parser-js@^0.7.23:
   resolved "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.23.tgz#704d67f951e13195fbcd3d78818577f5bc1d547b"
   integrity sha512-m4hvMLxgGHXG3O3fQVAyyAQpZzDOvwnhOTjYz5Xmr7r/+LpkNy3vJXdVRWgd1TkAb7NGROZuSy96CrlNVjA7KA==
 
-ufo@^0.6.2:
+ufo@^0.6.4:
-  version "0.6.2"
+  version "0.6.4"
-  resolved "https://registry.npmjs.org/ufo/-/ufo-0.6.2.tgz#0def51a6c4ecbd6e1a4d192622a1cefdb9103164"
+  resolved "https://registry.npmjs.org/ufo/-/ufo-0.6.4.tgz#d2332bdcb8a31a399d1a6ab06a4646a524524a81"
-  integrity sha512-BRoE0KTw4s+oVJ5GqYaNthVOFcLbdzw5qbHMmGRxZ3YHZJ0m5Zqvni0u+Ipugt5fHLzE2mC8FtaUZyta0EfUDw==
+  integrity sha512-pi9H3gE8CSyM/IeKAKiozUP7ImtKh+qip5v8nzGiErFVGx9HEDThwT1+R1yCS+JQW56mEqQ9t/r4STviUqaebQ==
 
 uglify-js@^3.1.4, uglify-js@^3.5.1:
   version "3.12.7"