ts-loader only. It does most of what babel-loader does, but babel-loder has perf issues Edit: don’t be scared to use babel-loader though guys, I’m talking about a large project (500+ files), and it’s pretty easy to switch out Answer from avenue-dev on reddit.com
🌐
Reddit
reddit.com › r/typescript › do you guys compile with ts-loader or babel-loader?
r/typescript on Reddit: Do you guys compile with ts-loader or babel-loader?
December 24, 2021 -

I'm bundling with webpack and normally I use ts-loader for ts files and babel for js

{
	test: /\.jsx?$/,
	use: 'babel-loader',
	exclude: /node_modules/
},
{
	test: /\.tsx?$/,
	use: 'ts-loader',
	exclude: /node_modules/
}

But I've noticed a lot of tutorial use babel-loader for both and just adding @babel/preset-typescript to .babelrc

{
    test: /\(.jsx?|.tsx?)$/,
    use: 'babel-loader',
    exclude: /node_modules/
 },

 //.babelrc
   plugins: ["@babel/preset-env", "@babel/preset-typescript"]

Do y'all go for approach #1, #2 or something else entirely?

Is Babel redundant if TypeScript is involved? Sep 23, 2019
r/typescript
6y ago
ts-loader / at-loader? Mar 2, 2018
r/typescript
8y ago
Do I need babel when using typescript? Sep 12, 2020
r/typescript
5y ago
More results from reddit.com
Top answer
1 of 5
115

Babel 7 does not need ts-loader.

As of Babel 7 the ts-loader is unnecessary, because Babel 7 understands TypeScript. Complete details of a TypeScript + Babel7 + Webpack setup are here.

An overview of the set up without ts-loader.

Install Babel's TypeScript support. Only @babel/preset-typescript is mandatory; the other three add additional features that TypeScript supports.

npm install --save-dev @babel/preset-typescript 
npm install --save-dev @babel/preset-env 
npm install --save-dev @babel/plugin-proposal-class-properties 
npm install --save-dev @babel/plugin-proposal-object-rest-spread

Configure the additional .babelrc plugins and presets.

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-typescript"
    ],
    "plugins": [
        "@babel/proposal-class-properties",
        "@babel/proposal-object-rest-spread"
    ]
}

And update your webpack.config.js (other code is omitted for clarity).

module: {
  rules: [
  {
     test: /\.(js|jsx|tsx|ts)$/,
     exclude: /node_modules/,
     loader: 'babel-loader'
    }
  ]
},
resolve: {
  extensions: ['*', '.js', '.jsx', '.tsx', '.ts'],
},
2 of 5
47

Loaders always execute right to left, so changing to

test: /\.tsx?$/, loaders: ['babel-loader', 'ts-loader'], exclude: /node_modules/

fixed the issue since it is going to run ts-loader first.

Full webpack.config.js file:

module.exports = {
  entry: ['babel-polyfill', './src/'],
  output: {
    path: __dirname,
    filename: './dist/index.js',
  },
  resolve: {
    extensions: ['', '.js', '.ts'],
  },
  module: {
    loaders: [{
      test: /\.ts$/, loaders: ['babel-loader', 'ts-loader'], exclude: /node_modules/
    }],
  }
};

Sample project: brunolm/typescript-babel-webpack.

Discussions

typescript - Why use babel-loader with ts-loader? - Stack Overflow
There is a TypeScript, Babel, React, and Karma Sample. The Webpack config contains babel-loader with ts-loader for .tsx? files. Please explain why it is needed? Why isn't ts-loader enough? More on stackoverflow.com
🌐 stackoverflow.com
reactjs - Webpack and babel-loader not resolving `ts` and `tsx` modules - Stack Overflow
I'm having some trouble when trying to implement Typescript in my project. Using Webpack and Babel to transpile and bundle files Using babel-loader with @babel/preset-typescript Not using tsc The... More on stackoverflow.com
🌐 stackoverflow.com
Inconsistency with TypeScript in Module Resolution with Fully-Specified ESM Imports
I'm submitting a bug report Webpack Version: 5.36.0 Babel Core Version: 7.13.16 Babel Loader Version: 8.2.2 Please tell us about your environment: Windows 10 Current behavior: Fully-specified E... More on github.com
🌐 github.com
3
April 28, 2021
Babel-loader with “@babel/preset-typescript” can not transform the git submodule tsx file?
I use the babe-loader with "@babel/preset-typescript" in webpack, it looks can't transform my git submodule's ts file. It arcurred the error.How can i deal with it?(lib dir is my ... More on github.com
🌐 github.com
4
April 10, 2019
🌐
2ality
2ality.com › 2019 › 10 › babel-loader-typescript.html
Compiling TypeScript via webpack and babel-loader
October 12, 2019 - My setup didn’t work if @babel/env came after @babel/typescript. preset-env: Make sure you get targeted browsers and the inclusion of builtins right (see documentation). For example, if you transpile async functions to JavaScript that doesn’t even use generators, then you need to include the regenerator runtime. ... module.exports = { ··· module: { rules: [ { test: /\.tsx?$/, loader: 'babel-loader', }, ··· ], }, };
🌐
Evanlouie
evanlouie.github.io › posts › typescript-babel-preset-typescript-ts-loader
babel/preset-typescript & ts-loader
February 11, 2020 - // webpack.config.js const path = require("path"); const webpack = require("webpack"); module.exports = { entry: "./src/index.ts", target: "node", mode: "production", module: { rules: [ { test: /\.tsx?$/, use: [ { loader: "babel-loader", options: { cacheDirectory: true, presets: [ ["@babel/preset-env", { targets: { node: "8" } }], [ "@babel/preset-typescript", { isTSX: true, allExtensions: true } ] ] } } ], exclude: /node_modules/ } ] }, plugins: [ new webpack.BannerPlugin({ banner: "#!/usr/bin/env node", raw: true }) ], resolve: { extensions: [".tsx", ".ts", ".js"] }, output: { filename: "compiled.js", path: path.resolve(__dirname, "dist") } };
🌐
Mattzeunert
mattzeunert.com › 2019 › 10 › 23 › migrating-your-webpack-typescript-build-from-ts-loader-to-babel-loader.html
Migrating your Webpack TypeScript build to babel-loader
October 23, 2019 - npm install \ @babel/core \ @babel/plugin-proposal-class-properties \ @babel/plugin-proposal-object-rest-spread \ @babel/preset-env \ @babel/preset-react \ @babel/preset-typescript \ babel-loader \ @babel/plugin-syntax-dynamic-import \ --save-dev
🌐
Medium
medium.com › @francesco.agnoletto › how-to-set-up-typescript-with-babel-and-webpack-6fba1b6e72d5
How to set up Typescript with Babel and Webpack | by Francesco Agnoletto | Medium
July 4, 2018 - rules: [ { test: /\.tsx?$/, loader: 'babel-loader', }, { test: /\.js$/, use: ["source-map-loader"], enforce: "pre" }, ... Finally, copy paste in your root folder a tsconfig.json file from the official documentation and you’re set, welcome to Typescript! Press enter or click to view image in full size ·
🌐
Babel
babeljs.io › presets › @babel/preset-typescript
@babel/preset-typescript · Babel
This preset is recommended if you use TypeScript, a typed superset of JavaScript. It includes the following plugins: ... You will need to specify --extensions ".ts" for @babel/cli & @babel/node cli's to handle .ts files.
🌐
GitHub
github.com › TypeStrong › ts-loader
GitHub - TypeStrong/ts-loader: TypeScript loader for webpack · GitHub
You probably don't want to give ... point of TypeScript. So what you can do is use the fork-ts-checker-webpack-plugin. It runs the type checker on a separate process, so your build remains fast thanks to transpileOnly: true but you still have the type checking. If you'd like to see a simple setup take a look at our example. ts-loader supports Yarn Plug’n’Play. The recommended way to integrate is using the pnp-webpack-plugin. ts-loader works very well in combination with babel and ...
Starred by 3.5K users
Forked by 439 users
Languages   TypeScript 96.7% | Dockerfile 2.3% | JavaScript 1.0%
Find elsewhere
🌐
DEV Community
dev.to › rinconcamilo › setting-up-react-babel-webpack-typescript-without-create-react-app-a9l
Setting up React, Babel, Webpack, & TypeScript Without Create-React-App👾 - DEV Community
October 15, 2022 - Before installing and configuring TypeScript into our application, let us first understand how we plan on integrating and using both TypeScript and Babel together. Babel: We will be utilizing Babel for transpiling our code only. Furthermore, since we are using Babel 7 we do not need to install the ts-loader since Babel 7 understands TypeScript with the babel-loader; and the additional plugins & preset we will install and set in the .babelrc will add the remaining functionality.
🌐
webpack
webpack.js.org › guides › typescript
TypeScript | webpack
resolve.tsconfig only handles module resolution — it does not transpile TypeScript. You still need ts-loader, babel-loader with @babel/preset-typescript, or another transpilation step.
🌐
Webdevtutor
webdevtutor.net › blog › typescript-babel-loader
Demystifying TypeScript Babel Loader: A Comprehensive Guide
TypeScript Babel Loader is a Webpack loader that enables the use of Babel alongside TypeScript.
🌐
I Am Turns
iamturns.com › typescript-babel
TypeScript With Babel: A Beautiful Marriage - I Am Turns
February 12, 2019 - Webpack is often used to solve this problem. Tweak your Webpack config to feed *.ts into TypeScript, and then feed the result into Babel. But which TypeScript loader do you use? Two popular choices are ts-loader and awesome-typescript-loader. The README.md for awesome-typescript-loader mentions it might be slower for some workloads, and recommends ts-loader with HappyPack or thread-loader.
🌐
Kevinwil
kevinwil.de › differences-in-output-of-typescript-compiler-and-babel-for-classes
Differences in output of Typescript compiler and Babel for classes | Kevin Wilde
Originally (before my time) at Course Hero, we were building our react apps using both ts-loader and babel-loader. ts-loader would compile Typescript to ES6, then babel-loader would transpile ES6 to ES5. However, since the Typescript compiler can target ES5 directly, we chose to remove Babel from the build process so that we were just using ts-loader.
🌐
TypeScript
typescriptlang.org › docs › handbook › babel-with-typescript.html
TypeScript: Documentation - Using Babel with TypeScript
This is a common pattern for projects with existing build infrastructure which may have been ported from a JavaScript codebase to TypeScript. This technique is a hybrid approach, using Babel’s preset-typescript to generate your JS files, and then using TypeScript to do type checking and .d.ts file generation.
🌐
GitHub
github.com › babel › babel-loader › issues › 904
Inconsistency with TypeScript in Module Resolution with Fully-Specified ESM Imports · Issue #904 · babel/babel-loader
April 28, 2021 - Babel Loader Version: 8.2.2 · Please tell us about your environment: Windows 10 · Current behavior: Fully-specified ES Module Imports (with the .js extension) do not resolve to the correct, matching .ts or .tsx files (as is the behavior of TypeScript and tsx, as per the TypeScript team here: microsoft/TypeScript#41887 (comment) ) See more details at the issue in the webpack repo: webpack/webpack#13252 ·
Author   babel
🌐
DEV Community
dev.to › saltyshiomix › why-babel-with-typescript-56l5
Why Babel with TypeScript? - DEV Community
November 15, 2018 - Yes, babel-loader. I explain how to acheive this step by step. ... Thanks to @babel/preset-typescript, we can handle /\.tsx?$/ by babel-loader.
🌐
npm
npmjs.com › package › ts-loader
ts-loader - npm
June 22, 2026 - You probably don't want to give ... point of TypeScript. So what you can do is use the fork-ts-checker-webpack-plugin. It runs the type checker on a separate process, so your build remains fast thanks to transpileOnly: true but you still have the type checking. If you'd like to see a simple setup take a look at our example. ts-loader supports Yarn Plug’n’Play. The recommended way to integrate is using the pnp-webpack-plugin. ts-loader works very well in combination with babel and ...
      » npm install ts-loader
    
Published   Jun 22, 2026
Version   9.6.2
🌐
GitHub
github.com › babel › babel-loader › issues › 782
Babel-loader with “@babel/preset-typescript” can not transform the git submodule tsx file? · Issue #782 · babel/babel-loader
April 10, 2019 - I use the babe-loader with "@babel/preset-typescript" in webpack, it looks can't transform my git submodule's ts file. It arcurred the error.How can i deal with it?(lib dir is my ...
Author   babel