react ts-loader not working with babel loader webpack

React ts-loader Not Working with Babel Loader Webpack

If you are working with TypeScript and React, you might have encountered an issue where the ts-loader is not working properly with the babel-loader in Webpack. This can be frustrating, but don’t worry, we have some solutions for you!

Solution 1: Use the babel-loader before the ts-loader

One solution to this problem is to configure the Webpack loaders in such a way that the babel-loader runs before the ts-loader. This allows Babel to transpile the TypeScript code before passing it to the TypeScript loader.

module.exports = {
  module: {
    rules: [
      {
        test: /.(tsx|ts)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env', '@babel/preset-react']
            }
          },
          {
            loader: 'ts-loader'
          }
        ]
      }
    ]
  }
};
  

This configuration tells Webpack to first use the babel-loader with the specified presets, and then pass the transpiled code to the ts-loader.

Solution 2: Use the babel-loader with the ts-loader

Another solution is to use the babel-loader together with the ts-loader. This can be achieved by configuring the ts-loader to use Babel for transpiling the TypeScript code.

module.exports = {
  module: {
    rules: [
      {
        test: /.(tsx|ts)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env', '@babel/preset-react']
            }
          },
          {
            loader: 'ts-loader',
            options: {
              transpileOnly: true,
              getCustomTransformers: () => ({
                before: [require('babel-plugin-transform-typescript-metadata').default]
              })
            }
          }
        ]
      }
    ]
  }
};
  

In this configuration, we are using the transpileOnly option to tell the ts-loader to only transpile the code without performing type checking. We also provide a custom transformer to handle TypeScript metadata using the babel-plugin-transform-typescript-metadata.

Final Thoughts

These are two possible solutions to the issue of react ts-loader not working with babel-loader in Webpack. Depending on your specific use case and requirements, you can choose the solution that works best for you.

Remember to always check the official documentation of the loaders and plugins you are using for the most up-to-date information and configuration options.

Happy coding!