fix(generator): encode routes and show error summary (#7518)

packages/generator/src/generator.js

@@ -23,7 +23,6 @@ export default class Generator {
       this.distPath,
       isUrl(this.options.build.publicPath) ? '' : this.options.build.publicPath
     )
-    this.generatedRoutes = new Set()
 
     // Shared payload
     this._payload = null
@@ -153,9 +152,16 @@ export default class Generator {
   async generateRoutes (routes) {
     const errors = []
 
-    this.routes = routes
+    this.routes = []
+    this.generatedRoutes = new Set()
+
+    routes.forEach(({ route, ...props }) => {
+      route = decodeURI(route)
+      this.routes.push({ route, ...props })
       // Add routes to the tracked generated routes (for crawler)
-    this.routes.forEach(({ route }) => this.generatedRoutes.add(route))
+      this.generatedRoutes.add(route)
+    })
+
     // Start generate process
     while (this.routes.length) {
       let n = 0
@@ -308,11 +314,11 @@ export default class Generator {
             .split('#')[0]
             .trim()
 
-          const href = sanitizedHref + possibleTrailingSlash
+          const route = decodeURI(sanitizedHref + possibleTrailingSlash)
 
-          if (href.startsWith('/') && !path.extname(href) && this.shouldGenerateRoute(href) && !this.generatedRoutes.has(href)) {
-            this.generatedRoutes.add(href) // add the route to the tracked list
-            this.routes.push({ route: href })
+          if (route.startsWith('/') && !path.extname(route) && this.shouldGenerateRoute(route) && !this.generatedRoutes.has(route)) {
+            this.generatedRoutes.add(route)
+            this.routes.push({ route })
           }
         })
       }
@@ -377,10 +383,10 @@ export default class Generator {
     await this.nuxt.callHook('export:routeCreated', { route, path: page.path, errors: pageErrors })
 
     if (pageErrors.length) {
-      consola.error('Error generating ' + route)
+      consola.error(`Error generating route "${route}": ${pageErrors.map(e => e.error.message).join(', ')}`)
       errors.push(...pageErrors)
     } else {
-      consola.success('Generated ' + route)
+      consola.success(`Generated route "${route}"`)
     }
 
     return true

packages/generator/test/generator.gen.test.js

@@ -95,12 +95,9 @@ describe('generator: generate routes', () => {
     const generator = new Generator(nuxt)
 
     generator.generateRoute = jest.fn()
-    jest.spyOn(routes, 'splice')
 
     const errors = await generator.generateRoutes(routes)
 
-    expect(routes.splice).toBeCalledTimes(3)
-    expect(routes.splice).toBeCalledWith(0, 2)
     expect(waitFor).toBeCalledTimes(5)
     expect(waitFor).nthCalledWith(1, 0)
     expect(waitFor).nthCalledWith(2, 100)
@@ -119,8 +116,6 @@ describe('generator: generate routes', () => {
 
     expect(generator._formatErrors).toBeCalledTimes(1)
     expect(generator._formatErrors).toBeCalledWith(errors)
-
-    routes.splice.mockRestore()
   })
 
   test('should format errors', () => {

packages/generator/test/generator.route.test.js

@@ -118,7 +118,7 @@ describe('generator: generate route', () => {
     const returned = await generator.generateRoute({ route, payload, errors })
 
     expect(consola.error).toBeCalledTimes(1)
-    expect(consola.error).toBeCalledWith('Error generating /foo')
+    expect(consola.error).toBeCalledWith('Error generating route "/foo": render route failed')
     expect(errors).toEqual([{
       error,
       route,

packages/vue-app/template/App.js

@@ -311,7 +311,7 @@ export default {
       route = (route.replace(/\/+$/, '') || '/').split('?')[0]
       const src = urlJoin(base, staticAssetsBase, route, 'payload.js')
       try {
-        const payload = await window.__NUXT_IMPORT__(route, src)
+        const payload = await window.__NUXT_IMPORT__(decodeURI(route), encodeURI(src))
         this.setPagePayload(payload)
         return payload
       } catch (err) {

test/fixtures/full-static/layouts/default.vue

@@ -10,8 +10,11 @@
       <NLink to="/pagination/1">
         Pagination
       </NLink>
+      <NLink to="/dynamic/foo bar">
+        Dynamic route 1
+      </NLink>
       <NLink to="/dynamic/foo%20bar">
-        Dynamic route
+        Dynamic route 2
       </NLink>
     </nav>
     <br>