eager dependency pre-bundling is no longer working about nuxt.js

[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)