devtools icon indicating copy to clipboard operation
devtools copied to clipboard

The route `${server.config.base}__devtools__` may result in inaccessibility when using `router.use(vite.middlewares)`

Open zzddlalala opened this issue 1 year ago • 2 comments

Recently, i tried to use devtools-next in my SSR project, but i found the error as shown in the below picture. image

I found it is caused by the unnormal route /__devtools__. So i checked the route register, and i found it is registered with the path /demo/demo/__devtools__, which includes two base string demo . It is casued by these code:

const { createServer } = await import('vite')
vite = await createServer({
  server: { middlewareMode: true },
  appType: 'custom',
})

router.use(vite.middlewares)
...
app.use(''/demo, router);

Besides, devtools-next register a the route ${server.config.base}__devtools__ by server.middlewares.

  function configureServer(server: ViteDevServer) {
    const base = (server.config.base) || '/'
    server.middlewares.use(`${base}__devtools__`, sirv(DIR_CLIENT, {
      single: true,
      dev: true,
    }))

I tried to pass base: '/' when createServer(), but it will influence the whole vite build process.

So, can you remove the server.config.base in the __devtools__ route? just like the other vite middlewares did. And let used decide how to register it. image

You can refer to this demo, thanks~ https://stackblitz.com/~/github.com/zzddlalala/vitejs-vite-ghsrnu

zzddlalala avatar Aug 27 '24 03:08 zzddlalala