Optimizing dependencies - Nuxt 3.8.1

[frasza]

Environment

---

• Operating System: Windows_NT
• Node Version: v20.9.0
• Nuxt Version: 3.8.1
• CLI Version: 3.9.1
• Nitro Version: 2.7.2
• Package Manager: pnpm@8.9.0
• Builder: -
• User Config: devtools
• Runtime Modules: -
• Build Modules: -

---

Reproduction

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

Describe the bug

Since Nuxt 3.8.1 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.

ℹ Vite server warmed up in 846ms                                                                                                                                                                        18:50:50
ℹ Vite client warmed up in 1195ms                                                                                                                                                                       18:50:50
✔ Nitro built in 548 ms                                                                                                                                                                           nitro 18:50:51
ℹ ✨ new dependencies optimized: @tiptap/vue-3, @tiptap/starter-kit                                                                                                                                     18:50:53
ℹ ✨ optimized dependencies changed. reloading    

Provided small reproduction using tiptap editor. On my own project I have even more of these packages that produce the issue.

[18:43:23] ℹ ✨ new dependencies optimized: @tiptap/vue-3, @tiptap/starter-kit, @tiptap/extension-placeholder, @tiptap/extension-link, primevue/usetoast
ℹ ✨ optimized dependencies changed. reloading   

[18:43:44] ℹ ✨ new dependencies optimized: echarts/core, echarts/renderers, echarts/charts, echarts/components, vue-echarts
ℹ ✨ optimized dependencies changed. reloading 

It really does impact DX since its doing full page refresh when it happens. If I revert to Nuxt 3.8.0, issue is gone.

Additional context

No response

Logs

No response

[manniL]

Please don't write "Me too" or "Same issue here" - instead leave a 👍🏻 on the issue ☺️

[nathanchase]

As far as I can tell, this dependency optimization will be triggered with any dynamically added component - particularly those introduced by third-party modules / plugins, or if you define a component using defineAsyncComponent(() => import('[name of package]'));

[danielroe]

I think this has been resolved in a dependency (likely vite related). With the lockfile you provided it is reproducible, but if you refresh your lockfile I can't reproduce.

[danielwaltz]

Hmm, I just so happened to have this issue up while debugging my project this morning, and at least for my project I'm still encountering this even after refreshing my lockfile.

I am using PrimeVue with Nuxt, and have a large amount of my pages client side only for auth related reasons. When accessing a page that uses a new PrimeVue component, it triggers dependency optimization and reloads the page. Not sure if the problem is actually more related to Prime, but I am also using date-fns and when a route accesses code that requires date-fns it also triggers a full page reload. My app is also making use of nested <Suspense> boundaries for data fetching, not sure if that is related either.

As you can imagine, especially given that each route only loads a subset of components, this leads to about every page requiring a full reload in development. I know that vite@5.0.0 is on the horizon, so maybe that will alleviate some of this, but for now I am stuck on nuxt@3.8.0.

[Letsion]

I am using clean Nuxt 3.8.1 (SPA) and have just (5 Minutes ago) regenerated the package-lock.json with npx nuxi upgrade --force and still have the problem.
I also use the feature of Nuxt to load the components dynamically.
I call the components with the <component> feature of Vue
Nuxt.config.ts:

...
components: {
        global: true,
        dirs: ['~/components'],
    },
...

I still have the problem every time I call a new .vue file.

[github-actions]

Would you be able to provide a reproduction? 🙏

More info

Why do I need to provide a reproduction?

Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.

What will happen?

If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritize it based on its severity and how many people we think it might affect.

If needs reproduction labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.

How can I create a reproduction?

We have a couple of templates for starting with a minimal reproduction:

👉 https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz
👉 https://codesandbox.io/s/github/nuxt/starter/v3-codesandbox

A public GitHub repository is also perfect. 👌

Please ensure that the reproduction is as minimal as possible. See more details in our guide.

You might also find these other articles interesting and/or helpful:

• The Importance of Reproductions
• How to Generate a Minimal, Complete, and Verifiable Example

[danielroe]

If you're still experiencing this, would you provide a reproduction? 🙏

[frasza]

@danielroe even with original reproduction as part of this issue, I have removed lock file and modules, fresh pnpm install but optimizations are still happening on my side.

[danielwaltz]

@danielroe Here's a reproduction I created just now.

It includes pages using different features such as suspense and client side only. One extra thing worth noting is I needed to disable prefetching on <NuxtLink> in order to make the issue more apparent, as I believe prefetching caused all page dependencies to be optimized immediately.

You'll see that clicking between each of the pages causes a dependency optimization and triggers a full page reload.

[AnthonyRuelle]

Is there any progress on this problem?
The new version has been published but we still won't be able to update.

[danielroe]

I don't believe this is a Nuxt issue but more likely a vite one that will be resolved when updating to Vite 5.

However, I can't investigate further as the reproduction doesn't reproduce the issue for me. It only prints it once into the console, and subsequent HMR and restarts of the dev server do not trigger re-optimising dependencies.

[danielwaltz]

Copy that! I will be curious to see if Vite 5 alleviate this as well.

It could also be my use case of developing inside a container making this harder to replicate, as this may be what leads to it not being a one-time optimization but an optimization every time my container is restarted.

If the reproduction I provided does optimize dependencies and reload the page on every initial route with a new dependency, for me this is what happens after every restart.

Either way, I appreciate the investigation and your hard work on Nuxt!

[travisricks]

I don't understand this problem fully, but for what it's worth I'm also experiencing it and I do not use a container. I work locally and am getting the optimize message/app reload every time I go to a page that includes a new dependency, e.g. from Lodash.

[anjarupnik]

Hi, I had the same issue. Not sure which change in nuxt@3.8.1 caused it because it didn't happen in v3.8.0, but I managed to prevent it by adding following to the nuxt.conifg:
vite: { optimizeDeps: { include: [add here all dependencies that are causing reloading] } }
Those dependencies should then be optimised before server starts up. Some more links about it:
https://stackoverflow.com/questions/75469067/vite-cypress-how-to-prevent-reloading-due-to-optimized-dependencies-causin
https://vitejs.dev/config/dep-optimization-options

[zakarialounes]

Hi, I had the same issue. Not sure which change in nuxt@3.8.1 caused it because it didn't happen in v3.8.0, but I managed to prevent it by adding following to the nuxt.conifg: vite: { optimizeDeps: { include: [add here all dependencies that are causing reloading] } } Those dependencies should then be optimised before server starts up. Some more links about it: https://stackoverflow.com/questions/75469067/vite-cypress-how-to-prevent-reloading-due-to-optimized-dependencies-causin https://vitejs.dev/config/dep-optimization-options

Specifying the name of node_modules packages in the configuration vite optimizeDeps.include corrects the problem.
Having said that, I'm not sure we should add dependencies coming from node_module ourselves, since the documentation states "By default, linked packages not inside node_modules are not pre-bundled". I therefore understand that packages in the node_modules folder should be pre-bundled?

[Letsion]

The error also occurs in the nuxt-nightly version.
he error still exists here: Nuxt 3.9.0-28346301.c214869e

[antfu]

I will look into it. You can try to debug this as well by passing DEBUG=vite:deps env to see Vite's debug log.

The thing I found is that every time Nuxt starts, the previous optimization cache is got removed:

With the insight from @patak-dev, I guess it's because the hash Vite calculated are not consistent across multiple run:

• https://github.com/vitejs/vite/blob/c902545476a4e7ba044c35b568e73683758178a3/packages/vite/src/node/optimizer/index.ts#L366
• https://github.com/vitejs/vite/blob/c902545476a4e7ba044c35b568e73683758178a3/packages/vite/src/node/optimizer/index.ts#L1210-L1226

I will dig and see what it causing that.

[antfu]

So, as you see on the linked PRs above, this is caused by quite a few moving parts. Basically it's because different Nuxt modules might contribute to the Vite config at a different time (racing conditions), and causing the Vite config to be unstable across runs and the hash being different: https://github.com/vitejs/vite/blob/c902545476a4e7ba044c35b568e73683758178a3/packages/vite/src/node/optimizer/index.ts#L1210-L1226

So basically, any module could cause that. The main one should be Nuxt DevTools (nuxt/devtools#542) where the fix is already released as v1.0.6. Then we have @nuxt/mdc (nuxt-modules/mdc#111) which is also a dependency of @nuxt/content. For other modules, we need to investigate one by one. Would love your help btw.

On the Vite side, fixes and proposals are on the way to make the experience better:

• fix: more stable hash calculation for depsOptimize vitejs/vite#15337
• feat: log re-optimization reasons vitejs/vite#15339

There is currently no userland workaround at this moment, please be patient for all those packages to be upgraded. Will keep this post updated.

[harlan-zw]

Ooh, nice find! It did feel like there was a bigger issue looming. I'll need to keep an eye out for this on my modules, the upstream PRs should help with that though.

[danielwaltz]

Awesome work! Not sure if this is the best place to track it anymore, but combing through the modules used in my project I found a place in the vueuse nuxt module that could be a culprit/contributing to this. 🤔

https://github.com/vueuse/vueuse/blob/main/packages/nuxt/index.ts#L75-L79

[josecl]

Working after upgrade to nuxt v3.9.0 and vue 3.4 🚀

[frasza]

Can confirm it works well with nuxt 3.9.0 and vue 3.4

[travisricks]

This issue was solved on my end too. I just did a weekly package update and it's happening again. Should I file something in the Vite repo? Has anyone else had the issue happen again?

I'm not exactly sure which package is causing the issue, but here are some of the packages that were updated that I think could be related.

• nuxt 3.9.1 > 3.9.3
• vue 3.4.10 > 3.4.15
• vite-node 1.1.3 > 1.2.1

[anjarupnik]

I also updated to 3.9.3 and issue is still there but it happens less often. It seems to happen every time package-lock is updated (even if updated dependency is not the one that needs to be optimised).

[danielroe]

That's vite's intended behaviour - it will reoptimise deps when your lockfile changes.

[travisricks]

In my case, my lockfile is not changing. I'm experiencing app reloads when running npm run dev and navigating from one route to a new route when that new route includes a new dependency, e.g. a method from lodash.

[anjarupnik]

@danielroe I understand but I think it would be a bit nicer developer experience if they are all optimised before page is served. Currently I start the server then it reloads 3 times for each dependency and then again on route change where another package is used.

[Letsion]

Hey @danielroe,
The problem with the dependencies optimized is back with version 3.11.1.

Edit: You can reproduce it with the example project at the top of the issue

[danielroe]

cc: @antfu

[antfu]

This issue gets a bit long and quite a lot of context involved - could anyone create a new issue linking back to this one, and with a reproduction of the latest nuxt? Otherwise I am not so sure what to "fix" - thank you!

[frasza]

@antfu #26783

[manniL]

I'll close here in favor of #26783 then to keep focus on the issue 👍🏻