Upgrade to Astro 6

Upgrading to Astro 6: One Vite Cache gotcha on Windows

First of all check your node version, due Astro 6 requires Node v22

On your terminal CLI: node -v
v24.11.0

Follow the Upgrade Guide Astro 6, and since I am using pnpm I obviously go for that. (Just saying, because I know some who copy/paste without reading.)

pnpm dlx @astrojs/upgrade

In my scenario, it mentioned some breaking changes. In my case it looked safe to continue, but I still needed to test my Vue functionality and Netlify afterwards.

 astro   Integration upgrade in progress.

      ●  @astrojs/db will be updated from v0.19.0 to v0.20.0
      ●  @astrojs/rss will be updated from v4.0.15 to v4.0.17
      ●  @astrojs/sitemap will be updated from v3.7.0 to v3.7.1
      ▲  astro will be updated  from v5.18.0 to v6.0.5 
      ▲  @astrojs/mdx will be updated  from v4.3.13 to v5.0.1 
      ▲  @astrojs/netlify will be updated  from v6.6.4 to v7.0.3 
      ▲  @astrojs/vue will be updated  from v5.1.4 to v6.0.1 

  wait   Some packages have breaking changes. Continue?
         Yes

 check   Be sure to follow the CHANGELOGs.
         astro https://docs.astro.build/en/guides/upgrade-to/v6/
         @astrojs/mdx https://github.com/withastro/astro/blob/main/packages/integrations/mdx/CHANGELOG.md#501
         @astrojs/netlify https://github.com/withastro/astro/blob/main/packages/integrations/netlify/CHANGELOG.md#703
         @astrojs/vue https://github.com/withastro/astro/blob/main/packages/integrations/vue/CHANGELOG.md#601

 ██████  Installing dependencies with pnpm...

+—————+  Houston:
| ^ u ^  Can't wait to see what you build.
+—————+

Upgrade completed, …time to test.

Everything worked fine except for pdf-lib on my Kanji Sensei page.

Issue

Observed below in my console:

kanji-sensei.astro:1  
GET http://localhost:4321/node_modules/.vite/deps/pdf-lib.js?v=64b5300b 
net::ERR_ABORTED 504 
(Outdated Optimize Dep)

:4321/node_modules/.vite/deps/pdf-lib.js?v=64b5300b:1 
Failed to load resource: the server responded with a status of 504
(Outdated Optimize Dep)

This happens when Vite tries to load an old optimized dependency from .vite/deps after a major upgrade, such as this.

Troubleshooting

In Chrome DevTools, check the “Network” tab, reload the page and do your actions step by step until you hit the error, mine was below:

Request URL http://localhost:4321/node_modules/.vite/deps/@pdf-lib_fontkit.js?v=922b6140 
Request Method GET Status Code 504 Outdated Optimize Dep 
Remote Address [::1]:4321 Referrer Policy strict-origin-when-cross-origin

In my case, pdf-lib and its internal @pdf-lib/fontkit chunk were stale.

Solution

In astro.config.mjs I temporarily added “pdf-lib” & “@pdf-lib/fontkit”:

  vite: {
    ...
    ...
    optimizeDeps: {
      include: ["p5", "pdf-lib" & "@pdf-lib/fontkit"],
    },
    ...
    ...
  },

1. Remove the .vite in node_modules and do an
2. pnpm install afterwards.
3. That should fix it (I hope), as it should rebuild the optimized dependencies.

However, I still got below error.

11:46:56 [200] /playground/tools/kanji-sensei 211ms
11:47:05 [ERROR] [vite] error while updating dependencies:
Error: EPERM: operation not permitted, rename 'C:\_PlayGroundProjects\re-masscom\node_modules\.vite\deps' -> 'C:\_PlayGroundProjects\re-masscom\node_modules\.vite\deps_temp_831cafa0'

I realized I left my browser open, which likely caused the error, either because it was still using the cached file or Windows had a lock on the .vite folder. So yeah, cache? Windows? Who knows. What I do know: when you’re troubleshooting, close everything that even smells like it’s using your project.

Removed the “pdf-lib” & “@pdf-lib/fontkit” from the astro.config.mjs, you can leave it but for me it is not really needed.

Mission accomplished!

References

Upgrade Guide Astro 6