DEV Community

Setup a React App using Webpack, Babel and TypeScript

Anubhav Sarkar on March 05, 2021

This article is part of a two part series on how to configure a React app from scratch with Webpack and Babel and eventually add TypeScript to it. ...

Read full post

kirlisakal • Jun 2 '21

Thanks for the article.
I have implemented webpack and babel to our reactjs ts project. However, on development, I cannot see codes as in writed in ts. I see all changed.
And I cannot found the way keep codes same while developing.

Anubhav Sarkar • Jun 3 '21

Maybe you could help me with a sample component and what issue you are facing! Would be happy to help you with that.

Hayoung Lee(이하영) • Apr 14 '21

Thank you!!! Great article!

Anubhav Sarkar • Apr 14 '21

Thank you for your feedback! 😄

andijaya • Jun 9 '21

nice tutorial, thank you

Anubhav Sarkar • Jun 10 '21

Thanks 😁

Irfaan Sulaiman • Aug 1 '21

Great Article - Thanks!

Pavel M • Nov 4 '21

Thanks, that helped a lot!

devhe4d • Jan 9 '22

One quick question, what is the point of using babel-loader if we are using Typescript and ts-loader / tsconfig for compiling?

Anubhav Sarkar • Jan 11 '22

You can keep only ts-loader for compiling. I added typescript on top of my webpack JS repo, so it already had the babel-loader, which I might have forgotten to remove at that time.

Ning Wang • Mar 25 '22

Don't babel-loader with ts-loader(remove this one!) upon babel 7! I hope this will save someone debugging in the future! Reference

Larry Dennison • May 3 '22

That's not entirely true for real-time type checking. If ts-loader is removed, type-checking must be done using tsc or similar. Babel will not run type checks (devblogs.microsoft.com/typescript/...). So yes, Babel understands TypeScript in Babel 7 now, which is great. But if someone is using the webpack dev server as in this post, they may want type-checking to happen upon every recompile.

In my experience, the easiest way to do that is to simply use both loaders in the rule, like this:

rules: [
    {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: ['babel-loader', 'ts-loader'], // evaluated right to left, so ts-loader first
    },
],

Amaury Vasquez • Jul 21 '21

Great article! Thank you

Anubhav Sarkar • Jul 22 '21

Thanks 😁