DEV Community

Cover image for How to Setup React App with Parcel and TypeScript
Furkan Emin Can
Furkan Emin Can

Posted on • Originally published at femincan.dev

How to Setup React App with Parcel and TypeScript

#react #typescript #programming #webdev

Parcel is a zero-config build tool with great out-of-the-box development experience and scalable architecture.

I experimented with Parcel in my previous project and I am happy with the result. (The second project of the Front End Development Libraries Curriculum of FreeCodeCamp.)

The setup process was a bit difficult. Thus, I will guide you to simplify this process in this article.

Note: To access the completed boilerplate, you can visit the react-parcel-ts-boilerplate.

1. Installing Dependencies

I have used npm for this boilerplate. But feel free to use any package manager you choose.

First, you need to install react and react-dom as dependencies.

npm i react react-dom
Enter fullscreen mode Exit fullscreen mode

Next, you need parcel and typescript packages as development dependencies, also since this is a TypeScript project, you need type definitions for react and react-dom.

npm i -D parcel typescript @types/react @types/react-dom
Enter fullscreen mode Exit fullscreen mode

2. Configuring tsconfig.json

The documentation says that:

Parcel supports TypeScript out of the box without any additional configuration.

When you try to run or build the app there is no problem. Yet, I consistently encountered TypeScript errors with IntelliSense.

Screenshot showing the error message: 'Cannot use JSX unless the --jsx flag is provided'.

In order to address these issues, I recommend using the following tsconfig.json file, as this configuration helped me resolve those issues:

{
  "compilerOptions": {
    "module": "ESNext",
    "target": "ESNext",
    "moduleResolution": "node",
    "lib": ["DOM", "ESNext"],
    "jsx": "react-jsx"
  }
}
Enter fullscreen mode Exit fullscreen mode

3. Creating Base Files

You need to create these three files in the src directory:

1. App.tsx: This file serves as the root component of the app.

const App = () => <div>App</div>;

export { App };
Enter fullscreen mode Exit fullscreen mode

2. index.tsx: This file is responsible for rendering the App component into the <div id="app"> element on the page.

import { createRoot } from 'react-dom/client';
import { App } from './App';

const root = createRoot(document.getElementById('app') as HTMLElement);

root.render(<App />);
Enter fullscreen mode Exit fullscreen mode

3. index.html: This file serves as the entry point for the app.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React (Parcel + TypeScript)</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="index.tsx"></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

4. Configuring package.json

Make sure to add the source property in the package.json (No need for the main property.), and set its value as the path to the index.html file.

"source": "src/index.html"
Enter fullscreen mode Exit fullscreen mode

Additionally, in order to run the app using scripts, you need to add the necessary scripts to the package.json file.

"scripts": {
  "start": "parcel",
  "build": "parcel build"
}
Enter fullscreen mode Exit fullscreen mode

5. Running the App

Since the app is ready, you can run it with start script:

npm start
Enter fullscreen mode Exit fullscreen mode

The "failed to install modules" Error

You may come across the following error, which I encountered when using pnpm in my previous project:

Screenshot showing the error message: 'Failed to install process: pnpm failed to install modules'.

To resolve this issue, add the process property under the alias property in the package.json file and set its value to false.

"alias": {
  "process": false
}
Enter fullscreen mode Exit fullscreen mode

Conclusion

Developing a React project with Parcel and TypeScript can present challenges, particularly on the TypeScript side. However, using this boilerplate was beneficial in my previous project, and I believe it can assist you as well.

Thank you for reading. Feel free to share your thoughts about Parcel in the comments section.

See you in the next one!

Stay in Touch

Resources

Top comments (0)