Webpack issues – Module build failed: Unexpected token

This error typically occurs when Webpack encounters syntax it can’t process due to incorrect loader configuration. Here’s how to systematically resolve it:

Primary Solutions

1. Install Required Loaders

npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react

2. Basic Webpack Configuration

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env',
              ['@babel/preset-react', { runtime: 'automatic' }]
            ]
          }
        }
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx']
  }
};

Common Error Scenarios

3. JSX Files Not Processed

// Update webpack config
{
  test: /\.(js|jsx)$/,  // Make sure both .js and .jsx are included
  exclude: /node_modules/,
  use: 'babel-loader'
}

4. TypeScript Support

npm install --save-dev ts-loader typescript @babel/preset-typescript

// webpack.config.js
{
  test: /\.(ts|tsx)$/,
  use: 'ts-loader',
  exclude: /node_modules/
}

Advanced Configuration

5. Handling CSS/SCSS

npm install --save-dev style-loader css-loader sass-loader

{
  test: /\.(css|scss)$/,
  use: ['style-loader', 'css-loader', 'sass-loader']
}

6. Asset Loading

{
  test: /\.(png|jpe?g|gif|svg)$/i,
  type: 'asset/resource'
}

Framework-Specific Fixes

7. React with Webpack 5

// webpack.config.js
module.exports = {
  // ... other config
  resolve: {
    extensions: ['.js', '.jsx', '.json'],
    alias: {
      react: path.resolve('./node_modules/react')
    }
  }
};

8. Next.js Custom Webpack

// next.config.js
module.exports = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['next/babel']
        }
      }
    });
    return config;
  }
};

Debugging Techniques

9. Verbose Error Logging

// webpack.config.js
module.exports = {
  // ... other config
  stats: 'verbose',
  infrastructureLogging: {
    level: 'verbose'
  }
};

10. Check Loader Order

// Correct loader order example for CSS
{
  test: /\.scss$/,
  use: [
    'style-loader',  // 3. Inject styles into DOM
    'css-loader',    // 2. Turns CSS into CommonJS
    'sass-loader'    // 1. Turns SCSS into CSS
  ]
}

Troubleshooting Checklist

1. [ ] Verify all required loaders are installed
2. [ ] Check file extensions in webpack config
3. [ ] Ensure proper loader order
4. [ ] Validate Babel presets/plugins
5. [ ] Check for syntax errors in source files
6. [ ] Look for conflicting package versions
7. [ ] Test with minimal reproducible example

Common Mistakes

• Missing file extensions in import statements
• Incorrect test regex in loader rules
• Loader order issues (process right-to-left)
• Conflicting presets in Babel config
• Webpack version mismatches with loaders