Fix: Module not found

The file doesn't exist (most common)

Look at the exact path in the error. Open your file explorer. Does the file exist?

• Wrong filename? (Button.jsx vs button.jsx)
• Wrong folder? (./components vs ./Component)
• Wrong case? macOS is case-insensitive; Linux is case-sensitive.

# Find the file
find . -name "Button*" -not -path "*/node_modules/*"

# If it doesn't exist — create it or fix the import

The package isn't installed

If the import is a package name (not ./ or ../), it must be in node_modules.

# Check if installed
ls node_modules/react-router-dom

# If missing, install it
npm install react-router-dom

# Or if it's a dev dependency
npm install -D typescript

# For monorepos, install in the correct workspace
npm install react-router-dom -w packages/web

The path alias isn't configured

If you're using @/components/Button, your build tool needs to know what @ means. Check your config.

// ✅ tsconfig.json (or jsconfig.json)
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

// ✅ vite.config.js
import path from 'path';
export default {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
}

// ✅ webpack.config.js
module.exports = {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
}

Missing file extension in Node ESM

Node.js ESM (when "type": "module" is set in package.json) requires file extensions in relative imports.

// ❌ Fails in Node ESM
import { helper } from './utils';

// ✅ Works in Node ESM
import { helper } from './utils.js';

// Note: This only applies to Node.js, not Webpack or Vite
// Webpack/Vite resolve extensions automatically