Fix Vite Build Rollup Failed to Resolve Import

Quick Answer

• Conclusion: This error occurs when Vite's production bundler (Rollup) cannot statically resolve an import statement during vite build, even if development mode works fine.
• First checks: Verify that vite.config.ts exists in your build context, all dependencies are installed, and path aliases are configured correctly in both vite.config.ts and tsconfig.json.
• Minimal fix: Add missing dependencies with npm install, or configure resolve.alias in vite.config.ts using absolute paths with path.resolve().
• Environment boundary: This error is specific to Vite projects using Rollup for production builds. It does not apply to development server errors, runtime errors, or non-Vite projects.

When This Error Appears

The "Rollup failed to resolve import" error typically surfaces during vite build in these scenarios:

• Path alias mismatch: You use @/components/Button but resolve.alias is missing or misconfigured in vite.config.ts.
• Missing dependencies: A package referenced in your code is not installed or has incompatible versions.
• Docker/CI builds: The build context lacks vite.config.ts or node_modules is not properly installed.
• CommonJS module issues: Rollup cannot resolve a CommonJS package that esbuild handled fine in development.
• Dynamic imports: Fully dynamic import(variable) statements that Rollup cannot statically analyze.

Root Cause Analysis

Vite uses two different bundlers depending on the environment:

This dual-bundler architecture means code that works perfectly in development can fail during production builds. The most common root causes are:

1. Alias configuration mismatch: vite.config.ts uses relative paths or is missing entirely from the build context.
2. Missing pre-bundling: Dependencies that esbuild automatically pre-bundles in dev mode are not pre-bundled for Rollup.
3. Inconsistent path mappings: tsconfig.json paths exist but vite.config.ts aliases do not, or vice versa.

Common Errors and Fixes

Error: Path alias not resolved

[rollup-plugin-dynamic-import-variables] Could not resolve './components/Button' from 'src/App.tsx'

Fix: Configure resolve.alias in vite.config.ts with absolute paths, and sync with tsconfig.json:

TYPESCRIPT
// vite.config.ts
import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});

JSON
// tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Error: Dependency not resolved

[vite]: Rollup failed to resolve import "tailwindcss" from "src/index.css"

Fix: Install the dependency and configure the plugin correctly:

BASH
npm install tailwindcss @tailwindcss/vite

TYPESCRIPT
// vite.config.ts
import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [tailwindcss()],
});

Error: CommonJS package not resolved

[vite]: Rollup failed to resolve import "lodash" from "src/App.tsx"

Fix: Force pre-bundling with optimizeDeps.include, or use subpath imports:

TYPESCRIPT
// vite.config.ts
export default defineConfig({
  optimizeDeps: {
    include: ['lodash'],
  },
});

Alternatively, import the specific subpath:

TYPESCRIPT
import debounce from 'lodash/debounce';

Error: Build fails in Docker

[vite]: Rollup failed to resolve import "some-lib" from "src/utils/helper.ts"

Fix: Ensure vite.config.ts is copied into the Docker build context:

DOCKERFILE
COPY package.json package-lock.json ./
RUN npm ci
COPY vite.config.ts ./
COPY . .

Also verify that .dockerignore does not exclude vite.config.ts.

FAQ

Q: Why does development mode work but production build fails with "Rollup failed to resolve import"?

A: This is caused by Vite's dual-bundler architecture. Development uses esbuild, which is more lenient with CommonJS modules and path resolution. Production uses Rollup, which is stricter. Common causes include:

• vite.config.ts missing from the build context (especially in Docker)
• Dependencies that esbuild auto-pre-bundles but Rollup cannot resolve
• Use of import.meta.env variables only available in development

Solution: Verify vite.config.ts is present in the build context and add problematic dependencies to optimizeDeps.include.

Q: I configured resolve.alias in vite.config.ts, but the build still fails with "Could not resolve '@/components/Button'"

A: This usually happens when the alias configuration in vite.config.ts does not match tsconfig.json. Vite reads vite.config.ts for builds, but TypeScript and your IDE rely on tsconfig.json for path resolution.

Solution:

1. Use absolute paths with path.resolve in vite.config.ts, not relative paths.
2. Sync tsconfig.json paths with your Vite aliases.
3. In monorepos, verify __dirname points to the correct project root.

Q: The package is in node_modules, but Rollup still cannot resolve it. Why?

A: Possible reasons include:

• The package is pure CommonJS without proper exports or main fields in its package.json
• Version incompatibility with other dependencies
• Symlink or workspace resolution issues in monorepos

Solution:

1. Add the package to optimizeDeps.include to force esbuild pre-bundling.
2. Check the package's package.json for correct main or module fields.
3. Delete node_modules and package-lock.json, then reinstall.
4. Use resolve.dedupe to force a specific package version if needed.