How I Fixed the “Module Not Found” Error When Deploying a Vite Project on Vercel

Deploying a Vite project to Vercel can sometimes cause an error:

Module not found

Even though the app works perfectly on your local machine, it might fail on Vercel.
In this article, I will explain:

Why this happens
How I fixed it
How you can avoid this error when using Vite with Vercel

Problem: Module Not Found Error on Vercel

When I pushed my Vite project to Vercel, the deployment failed.
The error said:

Error: Cannot find module

But everything was running smoothly on my local machine.
This usually happens because Vercel expects a build command to generate the project, but my project was missing it.

My Original Mistake in `package.json`

Here’s what my original package.json looked like:

{
  "scripts": {
    "dev": "vite",
    "build": "echo \"Build step not defined\"",
    "start": "vite"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "vite": "^5.0.0"
  }
}

Problems:

The "build" script was wrong.
Vite was inside devDependencies.

Vercel couldn’t find how to build the project.

How I Solved the Error

I updated my package.json properly.

Here’s the corrected version:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "vite": "^5.0.0"
  }
}

Changes I made:

"build" script is now "vite build"
Added "preview" script

Moved Vite into dependencies instead of devDependencies

After this, my Vercel deployment worked perfectly!

Extra Tip: Add a `vercel.json` File

If you want more control over Vercel deployment, you can add a vercel.json file.

Example:

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "framework": "vite"
}

This tells Vercel:

How to build the app
Where the output files are
What framework you are using

Learn more about this on Vercel Documentation.

Why Does This Error Happen?

Vercel automatically installs packages and builds the project when you deploy.
If your package.json doesn’t have the correct build script:

Vercel doesn’t know how to build it

The bundler doesn’t prepare files correctly
Modules are missing during build time

That’s why the “Module not found” error appears.

Quick Checklist to Deploy Vite on Vercel

Here’s a simple checklist to avoid this error:

Install Vite properly (npm install vite)
Write correct dev, build, and preview scripts

Move vite into dependencies if needed
Create a vercel.json file (optional but helpful)
Always test your local build (npm run build) before deploying

Related Helpful Guides

Final Thoughts

If you are using Vite and deploying to Vercel, always remember:

Define the correct "build" script
Check dependencies carefully
Test your build before pushing

By following these simple steps, you can easily fix the “Module not found” error and deploy your app successfully.