feat: HMR support for serverMiddleware

[pi0]

Types of changes

• Bug fix (a non-breaking change which fixes an issue)
• New feature (a non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Refactor

Description

Fixes #6877 #1509.

This PR brings huge DX improvements to Nuxt serverMiddleware by watching all serverMiddleware (and their require dependency tree). HMR supported for both path and handler.

Changes summary:

• Server refactored to support in-place HMR of middleware stack and also adds additional meta (7505ac5)
  • New middleware syntax is more consistent with express (path/handler ~> route/handle - with backward compatibility)
• Fixed an important bug in cjs helper that causes process fatal error when accessing a cache entry which had already errors (more DX coming in another PR for HMR of nuxt.config) (26581e6)
• Replaced old full restart in Builder with new HMR in Builder (In rare cases if any error happens fullRestart fallback happens) (8a950ce)

Error handling: Normal runtime errors already being handled by error middleware. In case an error happens due to syntax/reference error, a placeholder will be automatically replaced. If path is defined inside same file, we try to preserve last state otherwise show error on all routes until problem is fixes.

Checklist:

• My change requires a change to the documentation.
• I have updated the documentation accordingly. (PR: #)
• I have added tests to cover my changes (if not applicable, please state why)
• All new and existing tests are passing.

[atinux]

Small typo

[atinux]

Can we add maybe a warn for path usage? Or update the docs for serverMiddleware?

[pi0]

@atinux Internally we normalize path/handler without any warning by this PR to use connect/express convention. We can deprecate it for Nuxt3.

[GaborTorma]

Please update the docs with examples, because it not working for me.
Thanx!

[jgmullor]

I have the same issue as @GaborTorma, only the first change on the server middlewares is detected

[pi0]

@GaborTorma @jgmullor

• If you are using Windows, there is a known issue going to be fixed with next release.
• This is a basic DX improvement for serverMiddleware. Nuxt functions coming soon ;)
• Would you please create an issue with reproduction steps when it is not correctly working?

[jgmullor]

@pi0 in our case we're using OSX/Ubuntu, I will try to create an issue with a jsbin later today, thank you! =)

[HuddleHouse]

Does anybody have an example of this working?

I am getting this error:

this.nuxt.server.serverMiddlewarePaths is not a function

[pi0]

@HuddleHouse Would you please ensure having 2.12+ version of @nuxt/server installed in node_modules? Are you using nuxt as middleware?

[HuddleHouse]

@pi0 Thanks for responding! That helped me figure out what was wrong.

It turns out 2.11+ versions of @nuxt/server & @nuxt/core were getting installed. I installed 2.12+ versions in dev dependencies and it worked!

[humanistical]

I'm getting the below error after this change, using an Express api backend exported as below:
~/api/index.js:
import express from 'express'
...
const app = express()
...
module.exports = {
route: '/api',
handler: app
}

nuxt.config.js:
serverMiddleware: [{ route: '/api', handler: '~/api/index.js' }]

Error:
FATAL Cannot create property '_middleware' on string '~/api/index.js'

at Server.resolveMiddleware (node_modules/@nuxt/server/dist/server.js:816:35)
at Server.useMiddleware (node_modules/@nuxt/server/dist/server.js:822:36)
at Server.setupMiddleware (node_modules/@nuxt/server/dist/server.js:680:12)
at async Server.ready (node_modules/@nuxt/server/dist/server.js:610:5)
at async Nuxt._init (node_modules/@nuxt/core/dist/core.js:689:7)

[mobihack]

@humanistical I am encountering the same problem. Any fix?

[TeleMediaCC]

I'm getting the below error after this change, using an Express api backend exported as below:
~/api/index.js:
import express from 'express'
...
const app = express()
...
module.exports = {
route: '/api',
handler: app
}

nuxt.config.js:
serverMiddleware: [{ route: '/api', handler: '~/api/index.js' }]

Error:
FATAL Cannot create property '_middleware' on string '~/api/index.js'

at Server.resolveMiddleware (node_modules/@nuxt/server/dist/server.js:816:35)
at Server.useMiddleware (node_modules/@nuxt/server/dist/server.js:822:36)
at Server.setupMiddleware (node_modules/@nuxt/server/dist/server.js:680:12)
at async Server.ready (node_modules/@nuxt/server/dist/server.js:610:5)
at async Nuxt._init (node_modules/@nuxt/core/dist/core.js:689:7)

@mobihack

You need to exports only the app in ~/api/index.js file:

module.exports = app

[mobihack]

@TeleMediaCC Thank you. This solved my problem.

For others who may encounter this problem, you don't need to sub route to '/api' inside your express setup. Just export without prepending api to your express routes.

Sample setup:

express /api/index.js

const express = require('express');
const app = express();

....

app.get('/auth', auth.getUser);
app.post('/auth', auth.checkUser);

....

module.exports = app;

In nuxt.config.js

module.exports = {
  serverMiddleware: [
    { route: '/api', handler: '~/api/index.js' }
  ]
};

This will generate automatically.

GET /api/auth
POST /api/auth