Solving the 'vite not found' Error Caused by Production Mode Flags
Ever been stuck debugging a failed build, only to discover that it’s because your favorite tool—like Vite—was mysteriously “not found”? If you’ve encountered this frustration, chances are you were running your build with --production=true
. Let me walk you through why this happens, how to fix it, and how to avoid this headache in the future.
What Happens When You Use --production=true
?
When you use --production=true
(or a similar flag in your build process), it triggers production mode. This mode is designed for deployment and comes with key optimizations:
Only
dependencies
are installed (skippingdevDependencies
).Build tools like Webpack, Vite, or Rollup (usually listed in
devDependencies
) are excluded.The goal is to reduce the size of
node_modules
and improve runtime performance.
However, this setup can backfire when critical build tools are missing in production, causing errors like:
Error: vite not found
Why Does This Happen?
In most projects, tools like Vite, Webpack, or other build systems are added to devDependencies
in package.json
:
"devDependencies": {
"vite": "^4.0.0",
"eslint": "^8.0.0"
}
This makes sense because these tools are only needed for development and the build process—not at runtime. But when you run --production=true
, only the dependencies
section is installed, so devDependencies
(including Vite) are skipped. This leads to a failed build.
How to Fix It
1. Install All Dependencies (Including devDependencies
)
You can force the installation of both dependencies
and devDependencies
during your production build:
npm install --production=false
This ensures that all required tools are available for the build process.
2. Move Build Tools to dependencies
If Vite (or any other build tool) is essential for the build process, move it from devDependencies
to dependencies
:
"dependencies": {
"vite": "^4.0.0"
}
This ensures the tool is always installed, even in production mode. However, this approach can increase the size of your node_modules
folder in production deployments.
3. Run Builds in Development Mode
If you only need the build process to work, set the environment to development
when running the build:
NODE_ENV=development npm install && npm run build
This installs all dependencies, including those in devDependencies
.
4. Use CI/CD to Handle Dependencies Properly
In a CI/CD pipeline, make sure your commands include all dependencies before the build:
npm install --production=false && npm run build
This ensures that the build process has everything it needs while your final deployment can still strip out unnecessary dependencies.
Best Practices to Avoid Build Failures
Audit Your
package.json
StructureUse
dependencies
for libraries and tools required at runtime and for building in production.Use
devDependencies
for tools only needed during development or testing.
Separate Build and Runtime Steps in CI/CD
Install all dependencies for the build step.
Prune unnecessary dependencies for the final deployment:
npm prune --production
Explicitly Handle
--production
Flags
If you rely on custom scripts, make sure they account for missingdevDependencies
. For example, use tools likeminimist
to handle flags:const args = require('minimist')(process.argv.slice(2)); if (args.production) { console.log("Running in production mode"); }
Lock Dependencies with
npm ci
Usenpm ci
in CI/CD pipelines to ensure a clean and reproducible dependency installation:npm ci && npm run build
TL;DR: The Fix for Your Build Woes
If your build is failing due to tools like Vite missing in production mode, here’s a quick checklist:
Install all dependencies with
npm install --production=false
.Move essential build tools from
devDependencies
todependencies
.Ensure your CI/CD pipeline installs everything before the build process.
Separate the build and runtime installation steps for cleaner deployments.
Final Thoughts
The --production=true
flag is a powerful way to optimize deployments, but it comes with pitfalls when build tools live in devDependencies
. By understanding how this flag works and carefully managing your package.json
, you can avoid hours of frustration and keep your builds running smoothly.
Have your own --production=true
horror story? Share it in the comments! Let’s commiserate—and celebrate the fixes—together.