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. ...
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
 
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
 
vkrms profile image
Pavel M

Thanks, that helped a lot!

Collapse
 
irfaantjj profile image
Irfaan Sulaiman

Great Article - Thanks!

Collapse
 
hayoung0lee profile image
Hayoung Lee(이하영)

Thank you!!! Great article!

Collapse
 
deadwing7x profile image
Anubhav Sarkar

Thank you for your feedback! 😄

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
 
andijayawizard profile image
andijaya

nice tutorial, thank you

Collapse
 
deadwing7x profile image
Anubhav Sarkar

Thanks 😁

Collapse
 
amauryvasquez profile image
Amaury Vasquez

Great article! Thank you

Collapse
 
deadwing7x profile image
Anubhav Sarkar

Thanks 😁