Running two vite servers with middleware mode prints websocket error

[sheremet-va]

Describe the bug

When running two Vite servers with server.middlewareMode: true, then Vite prints WebSocket server error: Port is already in use to stderr.

Looking at the source code, I don't see a nice way to bypass that with a config. I see that we can define hmr.port, but for our use case (Vitest) hmr is disabled. Even more, we don't need this WS server at all.

Reproduction

https://stackblitz.com/edit/node-enw9th?file=index.mjs,index.html

Steps to reproduce

node index.mjs

System Info

stacbkblitz

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[bolt-new-by-stackblitz]

Start a new pull request in StackBlitz Codeflow.

• node-enw9th (Open reproduction)

[mkilpatrick]

I have run into this as well. If we could configure turning off the websocket server completely that'd be great, but at least an option to not log the error would be nice too.

[dilane3]

I got this warning message while running two differents vite apps based on react.

When I receive this warning message on my second app, hmr does not work properly, because the websocket server is not working on the second app.

There is any way to fix that issue please ?

Any help will be appreciated

[markacola]

A workaround for this issue is to manually specify the port via the server.hmr.port option, e.g.:

export default defineConfig({
  // ...
  server: {
    hmr: {
      port: 3005,
    },
  },
  // ...
})

Ideally, a fix could be implemented to select a port automatically, mirroring the behaviour of the primary port selection process.

[marvinruder]

For vitest, one may configure a custom logger:

import { createLogger } from "vite";

const customLogger = createLogger();
const customLoggerError = customLogger.error;
customLogger.error = (msg, options) => {
  // vitejs/vite#14328
  if (msg.includes("WebSocket server error: Port is already in use")) return;
  customLoggerError(msg, options);
};