routes - Nuxt.js routing middleware issue if target is set to 'static'

Question

target: 'static' and router middleware.

Hello, we have an application built on nuxt v2.4.0 which uses mode: 'universal'. After migration to nuxt 2.14.0 the app keeps working properly. However, there is a warning appears during 'yarn generate' command execution:

mode option is deprecated. You can safely remove it from nuxt.config

the 'router' section of the nuxt.config.js is:

  router: {
    trailingSlash : true,
    middleware: 'noroute'
  },

and the middleware/noroute.js file:

import consola from 'consola'
export default function ({ redirect, route }) {
  consola.log('consola welcomes you')
    if (!route.name) {
      return redirect(302, "/not-found/")
    }
}

to build the app the following command is used:

$yarn generate && yarn start

the app perfectly starts and its behaviour is expected.

yarn run v1.22.10
$ nuxt start

 WARN  mode option is deprecated. You can safely remove it from nuxt.config


   ╭───────────────────────────────────────╮
   │                                       │
   │   Nuxt @ v2.14.12                     │
   │                                       │
   │   ? Environment: production           │
   │   ? Rendering:   server-side          │
   │   ? Target:      static               │
   │                                       │
   │   Listening: http://localhost:3000/   │
   │                                       │
   ╰───────────────────────────────────────╯

? Serving static application from dist/     

when I'm trying to perform HTTP get a request to the page which does not exist the server response is perfect:

$ curl -I http://localhost:3000/page-that-does-not-exist
HTTP/1.1 302 Found
Location: /not-found/
Date: Fri, 22 Jan 2021 11:00:18 GMT
Connection: keep-alive

So far so good. Now i'm trying to get rid of the annoying warning message appearing at nuxt generate call by adding the target: 'static' to the nuxt.config.js:

export default {
  mode: 'universal',
  target: 'static',
  //ssr: true,
  
  router: {
    trailingSlash : true,
    middleware: 'noroute'
  },
  ...

yarn generate && yarn start:

$ nuxt start

 WARN  mode option is deprecated. You can safely remove it from nuxt.config                                                                                                                            13:09:25


   ╭───────────────────────────────────────╮
   │                                       │
   │   Nuxt @ v2.14.12                     │
   │                                       │
   │   ? Environment: production           │
   │   ? Rendering:   server-side          │
   │   ? Target:      static               │
   │                                       │
   │   Listening: http://localhost:3000/   │
   │                                       │
   ╰───────────────────────────────────────╯

? Serving static application from dist/  

but now curl returns HTTP status 200:

$ curl -I http://localhost:3000/page-that-does-not-exist
HTTP/1.1 200 OK
Content-Type: text/html
Date: Fri, 22 Jan 2021 11:10:21 GMT
Connection: keep-alive

It looks like the routing flow has been changed recently.

Based on the info from the article mode: 'universal' option is an equivalent of 2 options target: 'static' and ssr: true (ssr:true is set by default so it can be omitted). However, it does not work this way.

There is another good article about static mode deployment to Netlify. The solution from it does not work either.

My question is: what is the correct configuration for Nuxt.js v2.14.0 which 100% matches the universal mode in the previous versions, or, maybe, the better question: what is the right way to get routing middleware to work with target: static.

Appreciate any kind of information which helps me resolving the issue

Thanks in advance.

question from:https://stackoverflow.com/questions/65845630/nuxt-js-routing-middleware-issue-if-target-is-set-to-static

Answer 1

Waitting for answers