Encountering a problem when using the Create-React-App TypeScript template, the output is a JS file instead of a TSX file

Question

While trying to create a new React application using the Create-React-App template and TypeScript, I ran into a problem. I followed the instructions on the official documentation (https://create-react-app.dev/docs/adding-typescript/) and used the following command:

<code>npx create-react-app my-app --template typescript
</code>

The following are the results of the command:

Installing software package. This may take several minutes.

The version of react-scripts you are using is incompatible with the --template option.

Installing react, react-dom and react-scripts...


995 packages added in 32 seconds

There are 34 packages looking for funding
  Run `npm fund` to learn more

success! created my-app-test under /home/ristirianto/belajar-react/my-app-test
Within this directory you can run several commands:

  npm start
    Start the development server.

  npm run build
    Package the application as static files for production.

  npm test
    Start the test runner.

  npm run eject
    Remove the tool and copy the build dependencies, configuration files, and scripts into the application directory. If you do this, you will not be able to return!

We recommend you start by typing:

  cd my-app-test
  npm start

Happy programming!

NOTE: This project is bootstrapped using an older version of unsupported tools.
Please update to Node >=14 and npm >=6 to get supported tools in new projects. 

My Node version: v18.17.1 My NPM version: 9.6.7

However, after the installation process, when I checked the files in the my-app folder, I noticed that the files had the extension .js ; instead of .tsx as TypeScript files should be. This seems to indicate that TypeScript is not configured correctly.

I'm not sure if I missed any steps or there's something wrong with the setup. Are there any steps I should take to ensure TypeScript is configured correctly when using the --template typescript option?

Any guidance or advice on how to troubleshoot and resolve this issue would be greatly appreciated. Thanks in advance for your help!

Answer 1

question

The version of create-react-app you are using does not support the --template option. Therefore, --template typescript has no effect and no .tsx file is generated in your project.

As for why npx create-react-app does not use a version that supports --template, I suspect that you have an old version of create-react- installed globally locally. app. I suspect this is because:

1. npx Can run locally installed packages (not limited to remote packages):

   – npx Documentation

2. npx will prompt whether to install the remote package, but your output does not show this prompt. The prompt is as follows:

   Need to install the following packages:
     create-react-app@x.y.z
   Ok to proceed? (y)

You can verify the above by checking the globally installed packages:

• npm: npm list -g
• Yarn: yarn global list

solution

After verifying that you have create-react-app installed globally, you can uninstall it:

• npm: npm uninstall -g create-react-app
• Yarn: yarn global remove create-react-app

create-react-app It is also recommended that you do not install the version globally:

– Getting Started Guide: Quick Start to Create React Apps