مصعب يوسف

Posted on Oct 26 Originally published at Medium

When Vercel Hates Your Build: Surviving the Nuxt 4 + i18n Deployment Nightmare

#webdev

There’s a moment every developer dreads:the local build works perfectly — smooth, fast, beautiful — then you push it to Vercel, and everything explodes.That’s exactly what happened when I deployed my Nuxt 4 project with i18n for multilingual support.What should’ve been a simple “click → deploy → done” turned into a four-hour debugging session filled with missing packages, failed builds, and questioning my career choices.

The Calm Before the Chaos

Locally, the app ran perfectly.

Translations worked fine, images loaded, Supabase connected, no issues at all.

So naturally, I assumed the deploy would be easy.

Then came the first build log on Vercel:

Cannot find package '@intlify/utils'

I laughed. Installed it manually. Pushed again.

Then the next line showed up:

Cannot find package '@vue/shared'

And then:

Cannot find package '@vue/compiler-dom'

Understanding What Went Wrong

Here’s the thing:

When you build locally, you have all your node_modules cached.

Even dependencies that aren’t listed in your package.json — like hidden i18n helpers — exist because npm already fetched them before.

But Vercel’s build system doesn’t care about that.

It runs your build in a completely clean environment each time.

If something isn’t explicitly declared or bundled, Vercel just shrugs and throws an error.

In short:

Nuxt’s i18n module uses internal packages like @intlify/utils, @intlify/core, etc.
Those aren’t always visible in your dependencies.
Vercel can’t find them.
Your build dies.

-The Long-Awaited Fix

After wasting hours searching through GitHub issues and reading posts that ended with “Solved: turns out I forgot to install it,”

I decided to go nuclear.

I listed every dependency Vercel had ever complained about, along with a few I suspected might be next,

and forced Nuxt’s Nitro engine to include them manually.

Inside nuxt.config.ts, I added this at the top:

const nitroInlinePackages = [
  "@intlify/utils",
  "@intlify/core",
  "@intlify/core-base",
  "@intlify/h3",
  "@intlify/shared",
  "@intlify/message-compiler",
  "@nuxtjs/i18n",
  "vue-i18n",
  "vue-router",
  "vue",
  "@iconify/utils",
  "@vue/compiler-dom",
  "@vue/compiler-ssr",
  "@vue/compiler-core",
  "@vue/compiler-sfc",
  "@vue/server-renderer",
  "@vue/shared",
  "@vue/runtime-core",
  "@vue/runtime-dom",
  "@vue/reactivity",
  "@vue/reactivity-transform",
  "@vue/devtools-api",
  "@vue/language-core",
  "consola",
  "ipx",
  "image-meta",
  "@fastify/accept-negotiator",
  "etag",
  "mlly",
  "ohash",
  "unstorage",
  "defu",
  "ufo",
  "h3",
];

Then I used it inside the config:

export default defineNuxtConfig({
  nitro: {
    externals: {
      inline: nitroInlinePackages,
    },
  },
});

The idea here is simple:

“Inline everything. If Vercel might need it, give it to Vercel.”

After that commit, the next deploy finally went green.

No more missing packages. No warnings. Just peace.

It only took about five hours of debugging, three coffees, and one mild breakdown to get there.

The Step-by-Step Vercel Setup (for Anyone Doing This the First Time)

If you’re just starting with Nuxt 4 and want to deploy to Vercel, here’s the process that actually works:

1. Push your project to GitHub (or GitLab/Bitbucket)

Make sure your repo is clean:

No local-only files.
package.json includes everything you use.
.gitignore excludes /node_modules.

2. Go to vercel.com

→ “New Project”

Import your repository. Choose your organization (or personal account).

3. Configure your environment variables

If you’re using .env, add these:

. Select build settings

Framework Preset: Nuxt 3 / Nuxt 4
Build Command: npm run build
Output Directory: .output/public

5. Add the inline package configuration

Include the nitroInlinePackages list in nuxt.config.ts.

This ensures all the i18n and Vue internals are bundled.

6. Deploy

Click Deploy and let it run.

The first deploy may take a few minutes.

When you see the green checkmark, that’s your cue to exhale.

7. (Optional) Enable build logs

In your Vercel dashboard:

Settings → General → Build Logs → Enabled

That way, if something breaks again, you can see which package started the war.

Bonus Tip: Debugging Smart

When a package is missing:

Check the exact error name.
Search inside your local node_modules to confirm it exists.
If it does — inline it.
If not — install it with npm i [package-name].

Keep your commits clean, but don’t feel bad if you end up with seven “fix” commits in a row.

Everyone does.

What I Learned

Vercel isn’t broken — it’s just strict.
It wants every dependency clearly declared.
i18n is a heavy module.
It depends on a full suite of @intlify and @vue packages behind the scenes.
Inline dependencies save time.
Nitro lets you tell Vercel exactly what to bundle.
Document your pain.
The next developer who finds your article will silently thank you at 2 AM.

Useful Links

Description

Fixing endless “Cannot find package” errors when deploying a Nuxt 4 + i18n project to Vercel.

Includes real commit logs, root cause analysis, and a simple step-by-step deployment guide that actually works.

Originally published on Medium on October 10, 2025.

DEV Community