Journey to adding TypeScript in existing React Project

Photo By — Rahul Mishra

Hello World !!! 🌎

I recently got a chance to add typescript in one of my projects. I thought it would be a piece of cake to add the support, but right after spending 10–15 mins I knew that it is going to be a painful journey.
But thanks to internet and helpful people, their articles made me to reach my goal.

So in this article I’ll be sharing the challenges which I faced while integrating typescript in existing react project.

So before we begin, I am sharing the package versions, so that if you aren’t using these versions, you can skip this and continue your search.

🎺 As usual, my journey begins with doing a google search adding typescript support to exsiting react project’.

I landed up using create-react-app website, as it was widely used and more popular among other search results which poped up.
https://create-react-app.dev/docs/adding-typescript/

As per create-react-app , I simply ran below command :

yarn add typescript @types/node @types/react @types/react-dom @types/jest

and Rename any component from js/jsx to tsx and you are good to go. 😀

They did mention that there will be some Type errors, wihtout fixing those we can procedd. But this is fine validation errors are like low hanging fruits.
Till this point every things was as expected.

But life isn’t easy as compared to create-react-app . 😁 (If your project is ages old and have many custom configurations)

As soon as I did above two things and re-started my development server, I got this demonic error: 💀

You may need appropriate loader to handle this file type, currently no loaders are configured to process this file.
Module parse failed: Unexpected token (45:8)
You may need appropriate loader to handle this file type, currently no loaders are configured to process this file.

By seeing this it was obvious that something is wrong in webpack config. I did some google search and landed to this beautiful article
https://www.smashingmagazine.com/2020/05/typescript-modern-react-projects-webpack-babel/

After reading this, I got to know that I was missing few things:

1. There was no .tsconfig.json file generated
2. webpack needs to be configured to support ts and tsx extension
3. typescript file loader needs to be added

There tsconfig.json was not as per my requirements, so I tweaked it and the final result was something like this:

And the other two steps was easy. I simply opened my webpack config file which was webpack.config.js and added loader under rules . + add .ts and .tsx extension under extensions section.

typescript loader in webpack config
extensions in webpack config

After doing these changes, only thing which was bothering me was aswesome-typescript-loader
Because for a standard package name the word awesome isn’t a good fit. Who does that for popular package.

But I ignored this, and fired up my console and executed yarn dev .

And as expected I got another horrific error:

Error: Debug Failure. False expression.
Child Process failed to process the request: Error Debug Failure. False Expression.

I was like what 🤭

Translation: Why doesn’t this pain ends man.

I didn’t find anything useful on internet. One thing was bothering me from starting, that is, everywhere previous developers have imported components like

import Avatar from '../Avatar.jsx';

And I just became a sheep for a while and did this( replaced jsx with tsx)

import Avatar from '../Avatar.tsx';

From my curiosity, when I removed the .tsx from the import then the above error was gone.

import Avatar from '../Avatar';

After doing above change, when I ran yard dev . I got another error. But I was happy because if you get different error that means, we are on right track and making progress.

At this point, I was 100% sure that this error was due to awesome-typescript-loader . (Not the package name, but the file loader).

So I did another search and found another more popular file loader for typescript.
https://www.npmjs.com/package/ts-loader

After using this loader I got another error:

TypeError: loaderContext.getOptions is not a function at getLoaderOptions
loaderContext.getOptions is not a function at getLoaderOptions

After google search I came to this article, which was giving me two options:

1. Either upgrade webpack to 5.
2. or specific version of ts-loader which works well with webpack 4.

So I went with option 2. and used

yarn add ts-loader@~8.2.0

After doing this change, I was able to run typescript in react successfully.

I hope this helps you in someways.

🍉

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store