bug(vite): ENOENT: no such file or directory, open '/__skip_vite/.nuxt/components/nuxt-error.vue'

[AndreyYolkin]

Environment

---

• Operating System: Linux (via Windows 11 WSL)
• Node Version: v16.19.0 (also tested Node 18)
• Nuxt Version: 2.16.3
• Nitro Version: 2.3.2
• Package Manager: [email protected]
• Builder: vite
• User Config: bridge, nitro, serverHandlers, devServerHandlers, devServer, typescript, buildModules
• Runtime Modules: -
• Build Modules: (), @nuxt/[email protected]

---

Reproduction

https://github.com/AndreyYolkin/nuxt-bridge-skip-vite
https://codesandbox.io/p/sandbox/frosty-leftpad-cn0sgz

Run npm run dev or open the Sandbox link

Describe the bug

In dev mode, Nuxt built-in files are not loading in a propper way, which causes ENOENT on server

Additional context

It remembers this issue: #649

"Literally no one cares, but I get annoyed by anything" - magic string to attract attention)

Logs

ERROR  1:13:33 PM [vite] Internal server error: ENOENT: no such file or directory, open '/__skip_vite/.nuxt/components/nuxt-error.vue'                                                13:13:33
      at Object.openSync (node:fs:590:3)
      at Object.readFileSync (node:fs:458:35)
      at getDescriptor (file:///home/user/nuxt-bridge-app-spa/node_modules/@vitejs/plugin-vue2/dist/index.mjs:86:66)
      at Context.load (file:///home/user/nuxt-bridge-app-spa/node_modules/@vitejs/plugin-vue2/dist/index.mjs:1075:28)
      at Object.load (file:///home/user/nuxt-bridge-app-spa/node_modules/vite/dist/node/chunks/dep-79892de8.js:43360:46)
      at runMicrotasks (<anonymous>)
      at processTicksAndRejections (node:internal/process/task_queues:96:5)
      at async loadAndTransform (file:///home/user/nuxt-bridge-app-spa/node_modules/vite/dist/node/chunks/dep-79892de8.js:41038:24)


 ERROR  1:13:33 PM [vite] Internal server error: ENOENT: no such file or directory, open '/__skip_vite/.nuxt/components/nuxt-loading.vue'                                              13:13:33
      at Object.openSync (node:fs:590:3)
      at Object.readFileSync (node:fs:458:35)
      at getDescriptor (file:///home/user/nuxt-bridge-app-spa/node_modules/@vitejs/plugin-vue2/dist/index.mjs:86:66)
      at Context.load (file:///home/user/nuxt-bridge-app-spa/node_modules/@vitejs/plugin-vue2/dist/index.mjs:1075:28)
      at Object.load (file:///home/user/nuxt-bridge-app-spa/node_modules/vite/dist/node/chunks/dep-79892de8.js:43360:46)
      at runMicrotasks (<anonymous>)
      at processTicksAndRejections (node:internal/process/task_queues:96:5)
      at async loadAndTransform (file:///home/user/nuxt-bridge-app-spa/node_modules/vite/dist/node/chunks/dep-79892de8.js:41038:24)

[danielroe]

<attention attracted>

[mlbiche]

Same issue here !

[BryceBarbara]

@danielroe Looks like this was broken in your PR #724, are there any plans to fix it?

[danielroe]

For sure! Equally, you should feel free to submit a PR if you get to it before I do. 🙏

[AndreyYolkin]

I didn't dive deeply but it's interesting for me, why it's working in Nuxt3. Also I'm curious about the origins of __skip_vite prefix 🫨

[BryceBarbara]

@danielroe I'm not familiar enough with the codebase however I did come up with a nasty workaround for the time being that others are free to use:

defineNuxtModule({
  meta: {
    name: 'SkipViteFix',
  },
  setup(_options, nuxt) {
    let cachedViteServer: ViteDevServer | null = null;
    nuxt.hook('vite:serverCreated', async (viteServer) => {
      cachedViteServer = viteServer;
    });
    nuxt.hook('server:devHandler', () => {
      const viteServer = cachedViteServer;
      if (!viteServer) {
        console.error('No vite dev server');
        return;
      }

      let insertionPoint = viteServer.middlewares.stack.findIndex(
        (m) =>
          m.handle instanceof Function &&
          m.handle.name === 'viteTransformMiddleware'
      );
      if (insertionPoint == -1) {
        console.error('Invalid middleware insertion point ' + insertionPoint);
        return;
      }
      viteServer.middlewares.stack.splice(insertionPoint, 0, {
        route: '',
        handle: (
          req: IncomingMessage & { _skip_transform?: boolean },
          _res: ServerResponse,
          next: (err?: any) => void
        ) => {
          // remove /__skip_vite/ from the URL
          if (req.url && req.url.includes('/__skip_vite/')) {
            const newUrl = req.url.replace('/__skip_vite/', '/');
            req.url = newUrl;
          }
          next();
        },
      });
    });
  },
})