How to fix Rollup failed to resolve import during build in React

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 install

If 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