eager dependency pre-bundling is no longer working

[madeofsun]

Environment

Working directory: /home/projects/github-um8mfw-zyx1rr                             16:29:50
Nuxt project info:                                                                 16:29:50

------------------------------
- Operating System: Linux
- Node Version:     v18.20.3
- Nuxt Version:     3.12.3
- CLI Version:      3.12.0
- Nitro Version:    2.9.7
- Package Manager:  npm@10.2.3
- Builder:          -
- User Config:      ssr, vite, compatibilityDate, devtools
- Runtime Modules:  -
- Build Modules:    -
------------------------------

Reproduction

Link to project with faulty behaviour (version 3.12.3)
https://stackblitz.com/edit/github-um8mfw-zyx1rr

Link to project with expected (old) behaviour (version 3.5.3)
https://stackblitz.com/edit/github-um8mfw-pufiup

Describe the bug

On the first dev server startup in version 3.5.3, dependencies are optimized eagerly.
While in 3.12.3 dependencies are optimized lazily which may cause waterfall of page reloads significantly affecting developer experience.
This is a problem because:

• it takes more time
• page may reload after some delay (it seems like the page is ready to interaction, but then it reloads)

Each reload is accompanied by this message:

new dependencies optimized: X, Y
optimized dependencies changed. reloading

To confirm the issue you need to:

1. delete node_modules/.cache directory
2. run npm run dev and do NOT visit the page in browser
3. once server is warmed up
   • 3.5.3 version - node_modules/.cache/vite/client/deps will contain optimized deps
   • 3.12.3 version - node_modules/.cache/vite/client/deps will not contain optimized deps
4. visit "index" page
   • 3.5.3 version - no page reloads
   • 3.12.3 version - may be multiple page reloads

Additional context

No response

Logs

First load log from my project with this issue (look at timestamps)

  ➜ DevTools: press Shift + Option + D in the browser (v1.3.9)                                                                                5:26:20 PM

[5:26:20 PM]  WARN  Plugin /Users/.../platform/support/blanket-3/.nuxt/keycloak.d.ts is not wrapped in defineNuxtPlugin. It is advised to wrap your plugins as in the future this may enable enhancements.

ℹ Vite client warmed up in 2093ms                                                                                                            5:26:22 PM
✔ Nuxt Nitro server built in 1903 ms                                                                                                   nitro 5:26:22 PM
ℹ ✨ new dependencies optimized: @fe/ozi, axios, @fe/bonsai-logger-nuxt3, qs                                                                 5:26:26 PM
ℹ ✨ optimized dependencies changed. reloading                                                                                               5:26:26 PM

[5:26:28 PM]  WARN  Plugin /Users/.../platform/support/blanket-3/.nuxt/keycloak.d.ts is not wrapped in defineNuxtPlugin. It is advised to wrap your plugins as in the future this may enable enhancements.

ℹ ✨ new dependencies optimized: @fe/prop-types, @fe/icons-vue3                                                                              5:26:31 PM
ℹ ✨ optimized dependencies changed. reloading                                                                                               5:26:31 PM

[5:26:32 PM]  WARN  Plugin /Users/.../platform/support/blanket-3/.nuxt/keycloak.d.ts is not wrapped in defineNuxtPlugin. It is advised to wrap your plugins as in the future this may enable enhancements.

ℹ ✨ new dependencies optimized: is-what, @fe/nuxt3-graylog, @fe/nuxt3-sentry                                                                5:26:44 PM
ℹ ✨ optimized dependencies changed. reloading                                                                                               5:26:44 PM

[5:26:45 PM]  WARN  Plugin /Users/.../platform/support/blanket-3/.nuxt/keycloak.d.ts is not wrapped in defineNuxtPlugin. It is advised to wrap your plugins as in the future this may enable enhancements.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• github-um8mfw-zyx1rr (Open reproduction)
• github-um8mfw-pufiup (Open reproduction)

[huang-julien]

Hello 👋 this is probably fixed in the nightly channel. can you try adding this piece of code in a module ?

    nuxt.hook('imports:sources', (sources) => {
      const routerImports = sources.find(s => s.from === '#app/composables/router' && s.imports.includes('onBeforeRouteLeave'))
      if (routerImports) {
        routerImports.from = 'vue-router'
      }
    })

or try with nuxt-nightly

[madeofsun]

@huang-julien Thanks for the quick reply!

Unfortunately, it does not work :(

Behaviour is the same as with 3.12.3 - https://stackblitz.com/edit/github-um8mfw-4wq7pl

[huang-julien]

ooops I commented on the wrong issue 🤦

[huang-julien]

I think we did something with optimizeDeps in 3.12
cc @antfu

[antfu]

In 3.5 there was a bug with warmup that warming up every single module, we later fixed that so now entries are lazy. And causing those dependencies are not discovered eagerly.

I had the impression for a very long time that Vite will pre-optimize entries in depedencies field of package.json but after a confirmation with @ patak-dev, that feature has been removed a very long while ago.

I am not sure if we could fix the warmup issue (which defeat the purpose of on-demand), but maybe we could have a better convention allow users to specify the deps to optimize? /cc @danielroe should we provide the dependenecis list from package.json on our end?

[antfu]

I made https://github.com/antfu/vite-plugin-optimize-exclude, which might or might not help. If you are interested, please give a try in your full app and see how things would improve for you.

[madeofsun]

@antfu Sorry for the slow reply

Currently, the best way to resolve the problem for me is to manually add each package to optimizeDeps.include

I tried the plugin like that, but there were errors:

✘ [ERROR] No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "getCurrentInstance"

    node_modules/vue-router/dist/vue-router.mjs:6:9:
      6 │ import { getCurrentInstance, inject, onUnmounted, onDeactivated, onActivated, computed, unref, watchEffect, defineComponent, reactive, h, provide, ref, watch, shallowRef, shallowReactive, nextTick } from 'vue';
        ╵          ~~~~~~~~~~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "inject"

    node_modules/vue-router/dist/vue-router.mjs:6:29:
      6 │ import { getCurrentInstance, inject, onUnmounted, onDeactivated, onActivated, computed, unref, watchEffect, defineComponent, reactive, h, provide, ref, watch, shallowRef, shallowReactive, nextTick } from 'vue';
        ╵                              ~~~~~~

✘ [ERROR] No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "onUnmounted"

    node_modules/vue-router/dist/vue-router.mjs:6:37:
      6 │ import { getCurrentInstance, inject, onUnmounted, onDeactivated, onActivated, computed, unref, watchEffect, defineComponent, reactive, h, provide, ref, watch, shallowRef, shallowReactive, nextTick } from 'vue';
        ╵                                      ~~~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "onDeactivated"

    node_modules/vue-router/dist/vue-router.mjs:6:50:
      6 │ import { getCurrentInstance, inject, onUnmounted, onDeactivated, onActivated, computed, unref, watchEffect, defineComponent, reactive, h, provide, ref, watch, shallowRef, shallowReactive, nextTick } from 'vue';
        ╵                                                   ~~~~~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "onActivated"

    node_modules/vue-router/dist/vue-router.mjs:6:65:
      6 │ import { getCurrentInstance, inject, onUnmounted, onDeactivated, onActivated, computed, unref, watchEffect, defineComponent, reactive, h, provide, ref, watch, shallowRef, shallowReactive, nextTick } from 'vue';
        ╵                                                                  ~~~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "computed"

    node_modules/vue-router/dist/vue-router.mjs:6:78:
      6 │ import { getCurrentInstance, inject, onUnmounted, onDeactivated, onActivated, computed, unref, watchEffect, defineComponent, reactive, h, provide, ref, watch, shallowRef, shallowReactive, nextTick } from 'vue';
        ╵                                                                               ~~~~~~~~

✘ [ERROR] No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "unref"

    node_modules/vue-router/dist/vue-router.mjs:6:88:
      6 │ import { getCurrentInstance, inject, onUnmounted, onDeactivated, onActivated, computed, unref, watchEffect, defineComponent, reactive, h, provide, ref, watch, shallowRef, shallowReactive, nextTick } from 'vue';
        ╵                                                                                         ~~~~~

✘ [ERROR] No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "watchEffect"

    node_modules/vue-router/dist/vue-router.mjs:6:95:
      6 │ import { getCurrentInstance, inject, onUnmounted, onDeactivated, onActivated, computed, unref, watchEffect, defineComponent, reactive, h, provide, ref, watch, shallowRef, shallowReactive, nextTick } from 'vue';
        ╵                                                                                                ~~~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "defineComponent"

    node_modules/vue-router/dist/vue-router.mjs:6:108:
      6 │ import { getCurrentInstance, inject, onUnmounted, onDeactivated, onActivated, computed, unref, watchEffect, defineComponent, reactive, h, provide, ref, watch, shallowRef, shallowReactive, nextTick } from 'vue';
        ╵                                                                                                             ~~~~~~~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "reactive"

    node_modules/vue-router/dist/vue-router.mjs:6:125:
      6 │ import { getCurrentInstance, inject, onUnmounted, onDeactivated, onActivated, computed, unref, watchEffect, defineComponent, reactive, h, provide, ref, watch, shallowRef, shallowReactive, nextTick } from 'vue';
        ╵                                                                                                                              ~~~~~~~~

✘ [ERROR] No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "h"

    node_modules/vue-router/dist/vue-router.mjs:6:135:
      6 │ import { getCurrentInstance, inject, onUnmounted, onDeactivated, onActivated, computed, unref, watchEffect, defineComponent, reactive, h, provide, ref, watch, shallowRef, shallowReactive, nextTick } from 'vue';
        ╵                                                                                                                                        ^

✘ [ERROR] No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "provide"

    node_modules/vue-router/dist/vue-router.mjs:6:138:
      6 │ import { getCurrentInstance, inject, onUnmounted, onDeactivated, onActivated, computed, unref, watchEffect, defineComponent, reactive, h, provide, ref, watch, shallowRef, shallowReactive, nextTick } from 'vue';
        ╵                                                                                                                                           ~~~~~~~

✘ [ERROR] No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "ref"

    node_modules/vue-router/dist/vue-router.mjs:6:147:
      6 │ import { getCurrentInstance, inject, onUnmounted, onDeactivated, onActivated, computed, unref, watchEffect, defineComponent, reactive, h, provide, ref, watch, shallowRef, shallowReactive, nextTick } from 'vue';
        ╵                                                                                                                                                    ~~~

✘ [ERROR] No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "watch"

    node_modules/vue-router/dist/vue-router.mjs:6:152:
      6 │ import { getCurrentInstance, inject, onUnmounted, onDeactivated, onActivated, computed, unref, watchEffect, defineComponent, reactive, h, provide, ref, watch, shallowRef, shallowReactive, nextTick } from 'vue';
        ╵                                                                                                                                                         ~~~~~

✘ [ERROR] No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "shallowRef"

    node_modules/vue-router/dist/vue-router.mjs:6:159:
      6 │ import { getCurrentInstance, inject, onUnmounted, onDeactivated, onActivated, computed, unref, watchEffect, defineComponent, reactive, h, provide, ref, watch, shallowRef, shallowReactive, nextTick } from 'vue';
        ╵                                                                                                                                                                ~~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "shallowReactive"

    node_modules/vue-router/dist/vue-router.mjs:6:171:
      6 │ import { getCurrentInstance, inject, onUnmounted, onDeactivated, onActivated, computed, unref, watchEffect, defineComponent, reactive, h, provide, ref, watch, shallowRef, shallowReactive, nextTick } from 'vue';
        ╵                                                                                                                                                                            ~~~~~~~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "nextTick"

    node_modules/vue-router/dist/vue-router.mjs:6:188:
      6 │ import { getCurrentInstance, inject, onUnmounted, onDeactivated, onActivated, computed, unref, watchEffect, defineComponent, reactive, h, provide, ref, watch, shallowRef, shallowReactive, nextTick } from 'vue';
        ╵                                                                                                                                                                                             ~~~~~~~~


 ERROR  [unhandledRejection] Build failed with 17 errors:                                                                                                                                                          4:48:17 PM
node_modules/vue-router/dist/vue-router.mjs:6:9: ERROR: No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "getCurrentInstance"
node_modules/vue-router/dist/vue-router.mjs:6:29: ERROR: No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "inject"
node_modules/vue-router/dist/vue-router.mjs:6:37: ERROR: No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "onUnmounted"
node_modules/vue-router/dist/vue-router.mjs:6:50: ERROR: No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "onDeactivated"
node_modules/vue-router/dist/vue-router.mjs:6:65: ERROR: No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "onActivated"
...

  node_modules/vue-router/dist/vue-router.mjs:6:9: ERROR: No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "getCurrentInstance"
  node_modules/vue-router/dist/vue-router.mjs:6:29: ERROR: No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "inject"
  node_modules/vue-router/dist/vue-router.mjs:6:37: ERROR: No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "onUnmounted"
  node_modules/vue-router/dist/vue-router.mjs:6:50: ERROR: No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "onDeactivated"
  node_modules/vue-router/dist/vue-router.mjs:6:65: ERROR: No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "onActivated"
  ...
  at failureErrorWithLog (node_modules/esbuild/lib/main.js:1651:15)
  at node_modules/esbuild/lib/main.js:1059:25
  at node_modules/esbuild/lib/main.js:1527:9
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)