How to configure Babel to support TypeScript and React in a project

Configuration Solutions

1. Install Required Dependencies

bash
# Core dependencies
npm install --save-dev @babel/core @babel/cli @babel/preset-env

# TypeScript support
npm install --save-dev @babel/preset-typescript

# React support
npm install --save-dev @babel/preset-react

# Runtime support (optional but recommended)
npm install --save @babel/runtime
npm install --save-dev @babel/plugin-transform-runtime

2. Basic Configuration (babel.config.js)

javascript
module.exports = {
  presets: [
    // Automatically select transformations based on target environment
    ['@babel/preset-env', {
      targets: {
        browsers: ['> 1%', 'last 2 versions', 'not ie <= 8']
      },
      useBuiltIns: 'usage',
      corejs: 3
    }],
    // TypeScript support
    '@babel/preset-typescript',
    // React support (includes JSX transformation)
    ['@babel/preset-react', {
      runtime: 'automatic', // React 17+ new JSX transform
      development: process.env.NODE_ENV === 'development'
    }]
  ],
  plugins: [
    // Runtime optimization
    ['@babel/plugin-transform-runtime', {
      corejs: 3,
      helpers: true,
      regenerator: true
    }]
  ]
};

3. Usage with Webpack

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

4. TypeScript Configuration (tsconfig.json)

json
{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "jsx": "preserve",  // Preserve JSX, let Babel handle it
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,  // Required by Babel
    "noEmit": true  // Babel handles compilation, TS only type checking
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

Advanced Configuration

1. Environment-Specific Configuration

javascript
// babel.config.js
module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-typescript', '@babel/preset-react'],
  env: {
    development: {
      plugins: [
        'react-refresh/babel'  // React Fast Refresh
      ]
    },
    production: {
      plugins: [
        'transform-remove-console'  // Remove console
      ]
    },
    test: {
      presets: [
        ['@babel/preset-env', { targets: { node: 'current' } }]
      ]
    }
  }
};

2. Decorator Support

bash
npm install --save-dev @babel/plugin-proposal-decorators

javascript
module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-typescript', '@babel/preset-react'],
  plugins: [
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    '@babel/plugin-proposal-class-properties'
  ]
};

3. Path Alias Configuration

javascript
// babel.config.js
module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-typescript', '@babel/preset-react'],
  plugins: [
    ['module-resolver', {
      root: ['./src'],
      alias: {
        '@': './src',
        '@components': './src/components',
        '@utils': './src/utils'
      }
    }]
  ]
};

json
// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@utils/*": ["src/utils/*"]
    }
  }
}

Common Issues

1. Separate Type Checking and Compilation

json
// package.json
{
  "scripts": {
    "type-check": "tsc --noEmit",
    "build": "npm run type-check && babel src --out-dir dist --extensions '.ts,.tsx'"
  }
}

2. Handle CSS/SCSS Imports

javascript
// Declare module in TypeScript
declare module '*.scss' {
  const content: { [className: string]: string };
  export default content;
}

3. Hot Reload Configuration

javascript
// webpack.config.js
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

module.exports = {
  module: {
    rules: [{
      test: /\.(ts|tsx)$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          plugins: [
            process.env.NODE_ENV === 'development' && 'react-refresh/babel'
          ].filter(Boolean)
        }
      }
    }]
  },
  plugins: [
    process.env.NODE_ENV === 'development' && new ReactRefreshWebpackPlugin()
  ].filter(Boolean)
};