This error occurs when Vite's Rollup bundler cannot locate an imported module during the production build process. It typically indicates incorrect file paths, missing dependencies, or misconfigured path aliases.
This error appears during the Vite build process when Rollup, the bundler used for production builds, cannot resolve an import statement in your code. Unlike development mode where Vite uses esbuild (which is more forgiving), the production build uses Rollup which has stricter module resolution requirements. The error message typically includes the problematic import path and the file where it was referenced. This is particularly common when migrating from development to production, as the build process may uncover path resolution issues that weren't apparent during development. Rollup's import resolution follows Node.js resolution rules but requires explicit configuration for non-standard paths, making this error a common stumbling block for developers using path aliases or working across different operating systems.
First, check that the import path in your code exactly matches the file location, including case sensitivity:
// ❌ Incorrect - case mismatch
import MyComponent from './components/myComponent';
// ✅ Correct - exact match
import MyComponent from './components/MyComponent';On Linux/Unix systems (including most CI/CD environments), file paths are case-sensitive. If you developed on Windows or macOS (case-insensitive), you may have imports that work locally but fail in production.
Also ensure you're including file extensions when necessary:
// ❌ May fail in some configurations
import utils from './utils';
// ✅ Explicit extension
import utils from './utils.ts';If you're using path aliases (like @/components), you must configure them in both tsconfig.json AND vite.config.ts:
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
'@components': path.resolve(__dirname, './src/components'),
'@utils': path.resolve(__dirname, './src/utils'),
},
},
});Note: TypeScript's path mapping in tsconfig.json only helps with type checking—it doesn't affect how Vite resolves modules at build time.
Check that all imported packages are listed in package.json and installed:
# Remove node_modules and lockfile
rm -rf node_modules package-lock.json
# Reinstall all dependencies
npm installIf the error mentions a specific package, verify it's in your dependencies:
npm list <package-name>If missing, install it:
npm install <package-name>Some packages may need explicit inclusion in Vite's dependency optimization:
// vite.config.ts
export default defineConfig({
plugins: [react()],
optimizeDeps: {
include: ['problematic-package', 'react-markdown'],
},
});This is particularly helpful for packages that use non-standard module formats or have complex dependency trees.
If a module should not be bundled (e.g., for server-side rendering or specific runtime requirements), mark it as external:
// vite.config.ts
export default defineConfig({
plugins: [react()],
build: {
rollupOptions: {
external: ['module-name'],
},
},
});Warning: Only externalize modules that will be available at runtime. Externalizing modules that won't be available will cause runtime errors.
Circular dependencies can cause resolution failures during build:
# Install dependency analysis tool
npm install -D madge
# Check for circular dependencies
npx madge --circular --extensions ts,tsx src/If circular dependencies are found, refactor your code to break the cycle by:
- Moving shared code to a separate module
- Using dependency injection
- Restructuring your component hierarchy
Development vs. Production Bundlers: Vite uses esbuild for development (fast but lenient) and Rollup for production builds (slower but stricter). This means import resolution issues may only surface during production builds. Always test your build locally with npm run build before deploying.
Filesystem Case Sensitivity: If you're developing on macOS/Windows but deploying to Linux, enable case-sensitive checking in your IDE to catch these issues early. VS Code users can add this setting:
{
"typescript.preferences.importModuleSpecifier": "relative",
"javascript.preferences.importModuleSpecifier": "relative"
}Plugin Order Matters: If using multiple Vite plugins (like vite-tsconfig-paths), the order of plugins in your config can affect module resolution. The path resolution plugin should typically come before framework plugins.
Monorepo Considerations: In monorepo setups, ensure that your workspace configuration properly exposes modules. You may need to configure resolve.preserveSymlinks: false in vite.config.ts to properly resolve symlinked dependencies.
Prop spreading could cause security issues
Prop spreading could cause security issues
Error: error:0308010C:digital envelope routines::unsupported
Error: error:0308010C:digital envelope routines::unsupported
React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render.
React Hook useEffect placed inside a condition
Hook can only be called inside the body of a function component
Hook can only be called inside the body of a function component
React Hook useCallback has a missing dependency: 'variable'. Either include it or remove the dependency array react-hooks/exhaustive-deps
React Hook useCallback has a missing dependency