Vite: [plugin:vite:import-analysis] Failed to resolve import

Educational use only. Content explains errors and defensive fixes for systems you own or are authorised to test. Do not use any technique here to access data, accounts, or networks without permission.

Root Cause

Vite relies on ES modules natively in the browser during development. This error occurs during the dev server build when Vite's dependency pre-bundling process cannot resolve an import path. It's often caused by importing a package that doesn't provide an ES module export (a pure CommonJS module), an incorrect alias configuration in `vite.config.js`, or trying to import files with non-standard extensions without configuring the proper Vite plugin (like `.vue` without the Vue plugin, or `.svg` without SVGR).

Fix / Solution

Verify that the dependency is installed. If using custom path aliases (like `@/components`), ensure they are correctly mapped in both `vite.config.js` (`resolve.alias`) and `tsconfig.json` (`compilerOptions.paths`). If the issue is with a problematic CommonJS dependency, you might need to force Vite to optimize it by adding it to the `optimizeDeps.include` array in your Vite configuration.

Code Snippet

// ❌ Fails if alias is not configured
import Button from '@/components/Button';

// ✅ Fix: Add alias configuration in vite.config.js
import { defineConfig } from 'vite';
import path from 'path';

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