Journey to adding TypeScript in existing React Project
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.
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
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: 💀
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
After reading this, I got to know that I was missing few things:
1. There was no
.tsconfig.json file generated
webpack needs to be configured to support
ts and tsx extension
typescript file loader needs to be added
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
rules . + add
.ts and .tsx extension under
After doing these changes, only thing which was bothering me was
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:
Child Process failed to process the request: Error Debug Failure. False Expression.
I was like what 🤭
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
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.
After using this loader I got another error:
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.