DEV Community

Cover image for Setup a React App using Webpack, Babel and TypeScript

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
Collapse
 
kirlisakal profile image
kirlisakal •

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.

Collapse
 
deadwing7x profile image
Anubhav Sarkar •

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

Collapse
 
vkrms profile image
Pavel M •

Thanks, that helped a lot!

Collapse
 
andijayawizard profile image
andijaya •

nice tutorial, thank you

Collapse
 
deadwing7x profile image
Anubhav Sarkar •

Thanks 😁

Collapse
 
hayoung0lee profile image
Hayoung Lee(이하영) •

Thank you!!! Great article!

Collapse
 
deadwing7x profile image
Anubhav Sarkar •

Thank you for your feedback! 😄

Collapse
 
devhe4d profile image
devhe4d •

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

Collapse
 
deadwing7x profile image
Anubhav Sarkar •

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.

Collapse
 
irfaantjj profile image
Irfaan Sulaiman •

Great Article - Thanks!

Collapse
 
nyngwang profile image
Ning Wang •

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

Collapse
 
lcdennison profile image
Larry Dennison •

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
    },
],
Enter fullscreen mode Exit fullscreen mode
Collapse
 
amauryvasquez profile image
Amaury Vasquez •

Great article! Thank you

Collapse
 
deadwing7x profile image
Anubhav Sarkar •

Thanks 😁