[vite] Internal server error: Failed to resolve import "./chunk-J5JSNRMJ.js" Does the file exist?

Describe the bug

[env] vite: 2.6.14 node: 12.18 vue: 3.2.21 vue-router: 4.0.12

file: node_modules/.vite/vue-router.js?v=a7f4b19c
import { setupDevtoolPlugin } from './chunk-J5JSNRMJ.js'

dev 模式下，在删除 .vite 目录后，冷启动时出现。 多次测试发现有 50% 几率出现这个错误 报错后系统会提示 [vite]: dependencies updated, reloading page…随即页面刷新后恢复正常。

在报错之前会有类似日志出现，表明中间有多次 updating 情况下才会触发问题

[vite] new dependencies found: axios, vue-router , updating...
[vite] Fail to load source Map for node_module/.vite/....chunk-xxx.js
[vite] new dependencies found: axios, vue-router , updating...
[vite] Fail to load source Map for node_module/.vite/....chunk-xxx.js
[vite] Internal server error: ....

Reproduction

1. remove node_modules/.vite
2. vite serve
3. repeat the test

System Info

os: mac 10.15.7
shell: 5.7.1 --/bin/zsh

node: 12.18.3
yarn: 1.22.5
npm: 6.14.6

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 https://github.com/vuejs/vue-next 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.

[fychinesepjj]

总结 分析了源码后，大概了解到问题是与 vite 更新机制有关系！ 如果要根本上解决这个问题，vite 需要改变它的更新机制，目前都是靠定时器进行处理，有重复刷新、编译等问题，很大可能是时序没控制好出现问题。

临时解决方法：提前把所有依赖库都添加到 optimizeDeps（或者external），这个报错问题就不会出现了。

optimizeDeps: {
  include: [
     'vue',
     'vuex',
    'vue-router',
    'lodash-es',
    ....
  ]
}

解决原因分析 服务在第一次启动的时候会预编译所有库依赖。

  if (!middlewareMode && httpServer) {
    let isOptimized = false
    // overwrite listen to run optimizer before server start
    const listen = httpServer.listen.bind(httpServer)
    httpServer.listen = (async (port: number, ...args: any[]) => {
      if (!isOptimized) {
        try {
          await container.buildStart({})
          ---------------------------------------
          // 服务启动的时候预编译
          await runOptimize()
          ---------------------------------------
          isOptimized = true
        } catch (e) {
          httpServer.emit('error', e)
          return
        }
      }
      return listen(port, ...args)
    }) as any
  } else {
     ---------------------------------------
    await container.buildStart({})
    // 服务启动的时候预编译
    await runOptimize()
    ---------------------------------------
  }

潜在问题点分析

1. 定时 NEW_DEPENDENCY_BUILD_TIMEOUT = 1s 刷新页面，超时后返回 408 让客户端刷新页面

    if (
      server._pendingReload &&
      // always allow vite client requests so that it can trigger page reload
      !req.url?.startsWith(CLIENT_PUBLIC_PATH) &&
      !req.url?.includes('vite/dist/client')
    ) {
      try {
        // missing dep pending reload, hold request until reload happens
        await Promise.race([
          server._pendingReload,
          // If the refresh has not happened after timeout, Vite considers
          // something unexpected has happened. In this case, Vite
          // returns an empty response that will error.
          new Promise((_, reject) =>
             ---------------------------------------------------------------------------------------
            setTimeout(reject, NEW_DEPENDENCY_BUILD_TIMEOUT)
             ---------------------------------------------------------------------------------------
          )
        ])
   

1. 定时 debounceMs = 100ms ，执行rerun --> optimizeDeps 执行依赖更新

function registerMissingImport(
    id: string,
    resolved: string,
    ssr?: boolean
  ) {
    if (!knownOptimized[id]) {
      currentMissing[id] = resolved
      if (handle) clearTimeout(handle)
---------------------------------
      handle = setTimeout(() => {
        handle = undefined
        rerun(ssr)
      }, debounceMs)
---------------------------------
      if (!server._pendingReload) {
        server._pendingReload = new Promise((r) => {
          pendingResolve = r
        })
      }
    }
  }

上述两个定时器有交叉情况出现，相互影响，最终会导致随机出现之前描述的 internal Error 问题

还有一个不可忽视的问题是依赖库的问题 出现问题都是用到了 lodash-es、ant-design-vue 这类库，他们主要特点是依赖较多，预编译速度也会很慢，不排除每次请求编译过程中，超时等导致出现问题。

[fychinesepjj]

顺便说下，vite 场景我用到了 virtual module