Posted inBack-End Front-End

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

May 3, 2025No CommentsPosted inBack-End, Front-End
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.

Last updated on May 3, 2025