Optimizing dependencies - Nuxt 3.11.2

[Letsion]

Environment

---

• Operating System: Windows_NT
• Node Version: v21.5.0
• Nuxt Version: 3.11.2
• CLI Version: 3.11.1
• Nitro Version: 2.9.6
• Package Manager: [email protected]
• Builder: -
• User Config: ssr, typescript, modules, imports, css, pinia, runtimeConfig, components, app, eslint, googleFonts
• Runtime Modules: @nuxtjs/[email protected], @pinia/[email protected], @nuxt/[email protected], [email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], [email protected], @vueuse/[email protected]
• Build Modules: -

---

Reproduction

https://github.com/Letsion/nuxt-optimize-deps

Describe the bug

Since Nuxt 3.11.0 I (and few others on Discord) have noticed on development app boot that Nuxt/Vite does some dependencies optimization and it happens quite often (sometimes even on every page refresh, sometimes I noticed only once per dev server startup). Problem is that is also does full page refresh.

See it the old issue: #24196

Additional context

No response

Logs

No response

[Letsion]

I did a bit of research. Nuxt 3.10.3 version uses Vite 5.1.4 and since vite 5.1.5 the problem persists again. After reading the changelog, I noticed that changes were made to the optimized deps again.

[TimGuendel]

This is indeed very annoying. As a workaround, I added all libraries that appeared in the messages to this include array in the nuxt config:

   vite: {
        optimizeDeps: {
            include: [
                // list all dependencies here
            ]
        }
    }

🤷‍♂️

[Letsion]

@antfu How are things looking, any news?

[Letsion]

Why is the issue only p2-nice-to-have and not marked as a bug?
I see it as a bug because something functional no longer works

[danielroe]

cc: @antfu - any ideas?

[Frallen]

It is difficult to fix the problem since the warning appears only in existing projects, updating the project does not help. If you start a new project, there will be no warning.

I get a warning when I use prime vue, vee-validate, yup.

[hi-ogawa]

Has anyone tried using optimizeDeps.entries? something like optimizeDeps.entries: ["./pages/**/*.vue"].
https://stackblitz.com/edit/github-qgua74?file=nuxt.config.ts

I'm not familiar with Nuxt's architecture, but I suppose client routes (and thus its dependencies) are lazily loaded before each navigation and that would require Vite to run deps optimization, which then involves browser full reload. I think this is a common issue and I remember these two recent issues in other frameworks:

• Vite slows down navigation due to dependency optimization remix-run/remix#8917
• fix: configure Vite config optimizeDeps.entries option sveltejs/kit#12182

The reproduction given in this issue is probably the simplest case, but at least for this one, Vite can correctly crawl @tiptap deps imported from pages/index.vue on initial server startup after adding optimizeDeps.entries. I get a log like this with DEBUG=vite:deps:

Show logs of vite:deps

$ DEBUG=vite:deps pnpm dev
...
  vite:deps Scan completed in 1449.13ms: 
  vite:deps   @tiptap/starter-kit -> (my-dir)/node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@tiptap/starter-kit/dist/index.js
  vite:deps   @tiptap/vue-3 -> (my-dir)/node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]/node_modules/@tiptap/vue-3/dist/index.js +1s
  vite:deps creating package.json in (my-dir)/node_modules/.cache/vite/client/deps_temp_db14d463 +1s
[nitro] rollup:before: 414.45ms                                                                                                                                                                                               4:52:29 PM
[nitro] types:extend: 0.023ms                                                                                                                                                                                                 4:52:29 PM
ℹ Vite server warmed up in 1902ms                                                                                                                                                                                            4:52:29 PM
  vite:deps ✨ static imports crawl ended +2s
  vite:deps Dependencies bundled in 1058.13ms +1s
  vite:deps removing cache dir (my-dir)/node_modules/.cache/vite/client/deps_temp_db14d463 +3ms
  vite:deps ✨ new dependencies were found while crawling that weren't detected by the scanner +153ms
  vite:deps ✨ re-running optimizer +0ms
  vite:deps new dependencies found: vue, vue-router, @tiptap/starter-kit, @tiptap/vue-3, ofetch, ufo, defu +3ms
  vite:deps creating package.json in (my-dir)/node_modules/.cache/vite/client/deps_temp_011fd118 +6ms
  vite:deps Dependencies bundled in 394.41ms +397ms
  vite:deps creating _metadata.json in (my-dir)/node_modules/.cache/vite/client/deps_temp_011fd118 +80ms
  vite:deps renaming (my-dir)/node_modules/.cache/vite/client/deps_temp_011fd118 to (my-dir)/node_modules/.cache/vite/client/deps +2ms
  vite:deps ✨ dependencies optimized +480ms

However, in practice, this might not be enough since Vite deps optimization scan (thus esbuild) doesn't actually transpile .vue file during this phase (it looks like it's simply extracting <script> tag from .vue file https://github.com/vitejs/vite/blob/f71ba5b94a6e862460a96c7bf5e16d8ae66f9fe7/packages/vite/src/node/optimizer/scan.ts#L387-L388). For example, I would assume auto-import based dependencies won't be discovered in this way.

[antfu]

For everyone who encounted the issue, please try this module and let us know how it would improve for you. Thanks!
https://github.com/antfu/nuxt-better-optimize-deps

[Frallen]

For everyone who encounted the issue, please try this module and let us know how it would improve for you. Thanks! https://github.com/antfu/nuxt-better-optimize-deps

I downloaded this package, there seem to be fewer reboots, but they still happen when import is needed.

The restart starts only when there is a new non-imported element on the page.

[antfu]

@Frallen could you share the repo so I could have a look? Thanks

[Frallen]

@Frallen should you share the repo so I could have a look? Thanks

I have a private project 😢. I will try to make a repository and repeat the behavior

[antfu]

@Frallen please give a try with nuxt-better-optimize-deps v0.1.0 - hope that would make it better for you

[Frallen]

@Frallen please give a try with nuxt-better-optimize-deps v0.1.0 - hope that would make it better for you

Thanks, it's much better! 🎉

So now the ecosystem libraries are excluded from optimization.
Do I need to add the rest of the libraries to `optimizeDeps.include'? Will I need to do the same in the future, or can I come up with something?

optimizeDeps: {
            include:[
                "libphonenumber-js",
                "markdown-it-mathjax3",
                "markdown-it",
                "yup",
                "highlight.js",
                "vee-validate",
            ]
        }

[daniluk4000]

@antfu and should module authors also exclude themselves if library supports ESM?

[antfu]

@antfu and should module authors also exclude themselves if library supports ESM?

I would say yes: https://github.com/nuxt/nuxt/pull/27372/files#diff-5a9de16d770e29c763f4acdc8596643eb6486d6efc14ebe37165ebfc8cb4a419R70-R73 especially there is a chance for your library to be depended by other libraries.

[manniL]

This should be resolved mostly through #27372, right?

[uorhsohk]

This should be resolved mostly through #27372, right?

When you say mostly do you mean that the problem occurs under some circumstances?

[danielroe]

It resolves probably the vast majority of issues with optimizeDeps. I can't reproduce the issue in the original reproduction provided above, so I'm going to mark it as resolved in the nightly release, or in the next release.

It is normal for vite occasionally to print optimized dependencies changed. reloading. But if this occurs persistently in the same project without dependencies or configuration changing, then I regard that as a bug and would welcome a new issue and a reproduction 🙏

[murshex]

Same problem using primevue, vee-validate, yup.

[alexcroox]

So the solution is to list every third party dependancy in optimizeDeps.include? I'm trying to test a very specific flow of events and it's incredibly frustrating when the page reloads everytime I'm testing it after a new package install.

I wouldn't mind waiting for an extra 20 seconds on dev server startup for vite to scan my entire project and optimise ahead of time. I want to test the UX and the page reloading everytime it finds a new unimported dependancy really hinders that.

[murshex]

So the solution is to list every third party dependancy in optimizeDeps.include? I'm trying to test a very specific flow of events and it's incredibly frustrating when the page reloads everytime I'm testing it after a new package install.

I wouldn't mind waiting for an extra 20 seconds on dev server startup for vite to scan my entire project and optimise ahead of time. I want to test the UX and the page reloading everytime it finds a new unimported dependancy really hinders that.

Are you using pnpm?

[alexcroox]

Are you using pnpm?

npm