picocolors is being bundled into the browser

[faisalagood]

Astro Info

Astro                    v5.15.2
Vite                     v6.4.1
Node                     v25.1.0
System                   Windows (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/react (v4.4.1)

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

Most likely related to #14615

Importing from astro:i18n in a client-side React component causes a hydration error:

[astro-island] Error hydrating: picocolors does not provide an export named 'default'

What's the expected result?

No hydration errors. Importing from astro:i18n in client components should work without leaking unnecessary dependencies into the browser bundle.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-enhowtqw

Participation

• I am willing to submit a pull request for this issue.

[JoostKersjes]

Just confirmed this is also what is causing these errors with our project using Vue. Our version of the useTranslatedPath utility is calling getRelativeLocaleUrl from astro:i18n.

Worth noting that for us the errors only happen on the DEV server, not with the PROD build.

[unrevised6419]

Note: this also breaks the interactivity of the component (lifecycle events are not called)

[delucis]

Thanks for the issue @faisalagood and the extra context @JoostKersjes!

I don’t think astro:i18n was ever intended for client-side use — it includes a lot of server-side code for doing things like redirects — so in a way this bug is helpful for revealing people are doing something we didn’t expect 😅 But still, apologies for the disruption.

I’m going to take a look at whether we can make a client version of this module that won’t have these issues.

[delucis]

OK, quick update: this is not an easy fix and we will likely deprecate usage of the astro:i18n from the browser in a future Astro major. There are a lot of edge cases and gotchas where this already doesn’t work as expected and risks bloating the client bundle when it is imported.

If you do still want to use it, for now, you can add picocolors to vite.optimizeDeps.include in your Astro config as a workaround:

// astro.config.mjs
import { defineConfig } from 'astro/config';

export default defineConfig({
  vite: {
    optimizeDeps: {
      include: ['picocolors'],
    },
  },
});

I know that might be not great news. I’ve posted a new RFC discussion for us to collect feedback on this feature: withastro/roadmap#1259

Please post there with your use cases and why you need astro:i18n on the client.