Module Resolution Issues - Complete Guide

# Common Module Resolution Issues

# 1. Module Not Found Errors
# Error: Cannot resolve module 'react'
import React from 'react';

# 2. Path Resolution Issues
# Error: Cannot resolve module './components/Button'
import Button from './components/Button';

# 3. Extension Resolution
# Error: Cannot resolve module './utils'
import { debounce } from './utils';

# 4. Node Modules Resolution
# Error: Cannot resolve module 'lodash'
import _ from 'lodash';

# 5. TypeScript Resolution
# Error: Cannot resolve module '@types/react'
import React from 'react';

# 6. Alias Resolution
# Error: Cannot resolve module '@/components/Button'
import Button from '@/components/Button';

# 7. Workspace Resolution
# Error: Cannot resolve module '@workspace/shared'
import { utils } from '@workspace/shared';

# 8. Dynamic Import Resolution
# Error: Cannot resolve module './components/Button'
const Button = lazy(() => import('./components/Button'));

# 9. CSS Module Resolution
# Error: Cannot resolve module './styles.module.css'
import styles from './styles.module.css';

# 10. Asset Resolution
# Error: Cannot resolve module './logo.png'
import logo from './logo.png';

# Webpack Module Resolution

# 1. Basic Module Resolution
# webpack.config.js
module.exports = {
  resolve: {
    modules: ['node_modules'],
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
  },
};

# 2. Advanced Module Resolution
# webpack.config.js
module.exports = {
  resolve: {
    modules: ['node_modules', 'src'],
    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
    mainFields: ['browser', 'module', 'main'],
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@components': path.resolve(__dirname, 'src/components'),
      '@utils': path.resolve(__dirname, 'src/utils'),
    },
  },
};

# 3. TypeScript Resolution
# webpack.config.js
module.exports = {
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
};

# 4. CSS Module Resolution
# webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
            },
          },
        ],
      },
    ],
  },
};

# 5. Asset Resolution
# webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[hash].[ext]',
              outputPath: 'assets/',
            },
          },
        ],
      },
    ],
  },
};

# 6. Dynamic Import Resolution
# webpack.config.js
module.exports = {
  resolve: {
    modules: ['node_modules', 'src'],
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

# 7. Workspace Resolution
# webpack.config.js
module.exports = {
  resolve: {
    modules: ['node_modules', 'packages'],
    alias: {
      '@workspace/shared': path.resolve(__dirname, 'packages/shared'),
      '@workspace/utils': path.resolve(__dirname, 'packages/utils'),
    },
  },
};

# 8. Fallback Resolution
# webpack.config.js
module.exports = {
  resolve: {
    fallback: {
      "fs": false,
      "path": require.resolve("path-browserify"),
      "crypto": require.resolve("crypto-browserify"),
    },
  },
};

# 9. Symlink Resolution
# webpack.config.js
module.exports = {
  resolve: {
    symlinks: false,
  },
};

# 10. Cache Resolution
# webpack.config.js
module.exports = {
  resolve: {
    cache: true,
  },
};

# TypeScript Module Resolution

# 1. Basic TypeScript Configuration
# tsconfig.json
{
  "compilerOptions": {
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@utils/*": ["src/utils/*"]
    }
  }
}

# 2. Advanced TypeScript Configuration
# tsconfig.json
{
  "compilerOptions": {
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@utils/*": ["src/utils/*"],
      "@types/*": ["src/types/*"]
    },
    "module": "esnext",
    "target": "es5",
    "lib": ["dom", "dom.iterable", "es6"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

# 3. Workspace TypeScript Configuration
# tsconfig.json
{
  "compilerOptions": {
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "@workspace/shared": ["packages/shared/src"],
      "@workspace/utils": ["packages/utils/src"]
    }
  }
}

# 4. Monorepo TypeScript Configuration
# tsconfig.json
{
  "compilerOptions": {
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "@company/shared": ["packages/shared/src"],
      "@company/utils": ["packages/utils/src"],
      "@company/components": ["packages/components/src"]
    }
  }
}

# 5. React TypeScript Configuration
# tsconfig.json
{
  "compilerOptions": {
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@hooks/*": ["src/hooks/*"],
      "@utils/*": ["src/utils/*"]
    },
    "jsx": "react-jsx"
  }
}

# 6. Next.js TypeScript Configuration
# tsconfig.json
{
  "compilerOptions": {
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@/components/*": ["src/components/*"],
      "@/pages/*": ["src/pages/*"],
      "@/utils/*": ["src/utils/*"]
    }
  }
}

# 7. Vue TypeScript Configuration
# tsconfig.json
{
  "compilerOptions": {
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@/components/*": ["src/components/*"],
      "@/views/*": ["src/views/*"],
      "@/utils/*": ["src/utils/*"]
    }
  }
}

# 8. Node.js TypeScript Configuration
# tsconfig.json
{
  "compilerOptions": {
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@/controllers/*": ["src/controllers/*"],
      "@/models/*": ["src/models/*"],
      "@/utils/*": ["src/utils/*"]
    }
  }
}

# 9. Library TypeScript Configuration
# tsconfig.json
{
  "compilerOptions": {
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@/types/*": ["src/types/*"],
      "@/utils/*": ["src/utils/*"]
    }
  }
}

# 10. Test TypeScript Configuration
# tsconfig.json
{
  "compilerOptions": {
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@/test/*": ["test/*"],
      "@/mocks/*": ["test/mocks/*"]
    }
  }
}

# Debugging Module Resolution

# 1. Webpack Debug Mode
# webpack.config.js
module.exports = {
  resolve: {
    modules: ['node_modules', 'src'],
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
  },
  stats: {
    modules: true,
    reasons: true,
    usedExports: true,
    providedExports: true,
  },
};

# 2. TypeScript Debug Mode
# tsconfig.json
{
  "compilerOptions": {
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "traceResolution": true
  }
}

# 3. Module Resolution Test
# test-resolution.js
const path = require('path');
const fs = require('fs');

function testModuleResolution(modulePath) {
  const possiblePaths = [
    path.resolve(modulePath),
    path.resolve(modulePath + '.js'),
    path.resolve(modulePath + '.jsx'),
    path.resolve(modulePath + '.ts'),
    path.resolve(modulePath + '.tsx'),
  ];
  
  for (const possiblePath of possiblePaths) {
    if (fs.existsSync(possiblePath)) {
      console.log(`Found: ${possiblePath}`);
      return possiblePath;
    }
  }
  
  console.log(`Not found: ${modulePath}`);
  return null;
}

testModuleResolution('./components/Button');

# 4. Webpack Resolution Plugin
# webpack.config.js
const path = require('path');

class ResolutionDebugPlugin {
  apply(compiler) {
    compiler.hooks.normalModuleFactory.tap('ResolutionDebugPlugin', (nmf) => {
      nmf.hooks.beforeResolve.tap('ResolutionDebugPlugin', (resolveData) => {
        console.log('Resolving:', resolveData.request);
      });
    });
  }
}

module.exports = {
  plugins: [
    new ResolutionDebugPlugin(),
  ],
};

# 5. Module Resolution Analyzer
# analyze-resolution.js
const fs = require('fs');
const path = require('path');

function analyzeModuleResolution() {
  const packageJson = JSON.parse(fs.readFileSync('package.json', 'utf8'));
  const dependencies = Object.keys(packageJson.dependencies || {});
  
  console.log('Dependencies:', dependencies);
  
  // Check if node_modules exists
  const nodeModulesPath = path.join(process.cwd(), 'node_modules');
  if (fs.existsSync(nodeModulesPath)) {
    console.log('node_modules exists');
  } else {
    console.log('node_modules missing');
  }
}

analyzeModuleResolution();

# 6. Path Resolution Test
# test-paths.js
const path = require('path');

function testPathResolution() {
  const baseUrl = process.cwd();
  const testPaths = [
    '@components/Button',
    '@/components/Button',
    './components/Button',
    '../components/Button',
  ];
  
  testPaths.forEach(testPath => {
    try {
      const resolved = path.resolve(baseUrl, testPath);
      console.log(`${testPath} -> ${resolved}`);
    } catch (error) {
      console.log(`${testPath} -> Error: ${error.message}`);
    }
  });
}

testPathResolution();

# 7. Webpack Stats Analysis
# webpack.config.js
module.exports = {
  stats: {
    modules: true,
    reasons: true,
    usedExports: true,
    providedExports: true,
    optimizationBailout: true,
    errorDetails: true,
    colors: true,
    hash: true,
    timings: true,
    assets: true,
    cached: true,
    cachedAssets: true,
    children: true,
    chunks: true,
    chunkModules: true,
    modulesSort: 'size',
    assetsSort: 'size',
  },
};

# 8. Module Resolution Report
# resolution-report.js
const fs = require('fs');
const path = require('path');

function generateResolutionReport() {
  const report = {
    timestamp: new Date().toISOString(),
    baseUrl: process.cwd(),
    nodeModules: fs.existsSync('node_modules'),
    packageJson: fs.existsSync('package.json'),
    tsconfig: fs.existsSync('tsconfig.json'),
    webpackConfig: fs.existsSync('webpack.config.js'),
  };
  
  fs.writeFileSync('resolution-report.json', JSON.stringify(report, null, 2));
}

generateResolutionReport();