Webpack: Module not found: Error: Can't resolve 'X'

1. Verificar que el paquete está instalado

npm install nombre-del-paquete
# o
npm install  # instalar todas las dependencias

2. Revisar la ruta del import

// ❌ Ruta mal escrita
import Header from './components/header'  // ¿existe ese archivo?
import utils from '../utills/helpers'      // typo: "utills"
// ✅ Ruta correcta
import Header from './components/Header'  // case sensitive en Linux
import utils from '../utils/helpers'

3. Configurar alias en webpack.config.js

const path = require('path');
module.exports = {
  resolve: {
    alias: {
      // ✅ Permite usar @/ como raíz del proyecto
      '@': path.resolve(__dirname, 'src'),
      // ✅ Alias específicos
      '@components': path.resolve(__dirname, 'src/components'),
      '@utils': path.resolve(__dirname, 'src/utils'),
    },
    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json']
  }
};

// Ahora puedes usar:
import Header from '@/components/Header'
import { formatDate } from '@utils/date'

4. Polyfills de Node.js en Webpack 5

# Instalar polyfills necesarios
npm install --save-dev crypto-browserify stream-browserify buffer process

// webpack.config.js
const webpack = require('webpack');
module.exports = {
  resolve: {
    fallback: {
      "crypto": require.resolve("crypto-browserify"),
      "stream": require.resolve("stream-browserify"),
      "buffer": require.resolve("buffer"),
      "path": require.resolve("path-browserify"),
      "fs": false,        // No disponible en browser
      "net": false,
      "tls": false,
    }
  },
  plugins: [
    new webpack.ProvidePlugin({
      process: 'process/browser',
      Buffer: ['buffer', 'Buffer'],
    }),
  ]
};

5. Extensions — importar sin extensión

// webpack.config.js
module.exports = {
  resolve: {
    extensions: ['.tsx', '.ts', '.jsx', '.js', '.json']
  }
};
// Ahora funciona sin extensión:
import MyComponent from './MyComponent'  // busca .tsx, .ts, .jsx, .js