Question 231717 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Issue with Create-React-App TypeScript Template, Outputting JS Files Instead of TSX

I’m having an issue while trying to create a new React application using the Create-React-App template with TypeScript. I followed the instructions on the official documentation (https://create-react-app.dev/docs/adding-typescript/) and used the following command:

npx create-react-app my-app --template typescript

Here’s the result of the command:

Installing packages. This might take a couple of minutes.

The react-scripts version you're using is not compatible with the --template option.

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


added 995 packages in 32s

34 packages are looking for funding
  run `npm fund` for details

Success! Created my-app-test at /home/ristirianto/belajar-react/my-app-test
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd my-app-test
  npm start

Happy hacking!

Note: the project was bootstrapped with an old unsupported version of 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 have a .js extension instead of the expected .tsx for TypeScript files. This seems to indicate that TypeScript is not properly configured.

I’m not sure if I missed any step or if there’s something wrong with the setup. Is there something I’m missing or a step I should be taking to ensure that TypeScript is correctly configured when using the --template typescript option?

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I encountered a similar issue that was documented in this GitHub thread: https://github.com/facebook/create-react-app/issues/12253. Based on my understanding of the discussion on that page, the problem appears to be related to Node.js installations done using the Snap package manager. In my case, I had previously installed Node.js using Snap.

    To resolve the issue, I took the following steps:

    1. Uninstall Node.js: I uninstalled the existing Node.js installation.
    2. Install NVM: I installed Node Version Manager (NVM) by following the instructions provided here: https://github.com/nvm-sh/nvm.
    3. Install Node.js via NVM: Once NVM was installed, I used the command nvm install 20 to install Node.js version 20.
    4. After installing Node.js via NVM, I used the standard create-react-app command with the TypeScript template to create my app: npx create-react-app my-app --template typescript.

    By taking these steps, I was able to successfully create a new React app without encountering the issue I had previously faced. This solution might be helpful for others who have experienced a similar problem after installing Node.js via Snap.


  2. 0

    Problem

    The react-scripts version you're using is not compatible with the --template option.

    The create-react-app version you’re using doesn’t support the --template option. As a result --template typescript has no effect and no .tsx files are generated in your project.

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

    1. npx can run packages installed locally (not just remote packages):

      This command allows you to run an arbitrary command from an npm package (either one installed locally, or fetched remotely)

      – npx documentation

    2. npx will prompt for permission to install remote packages however your output doesn’t show this prompt. The prompt looks like this:

      Need to install the following packages:
  [email protected]
Ok to proceed? (y)

    You can verify the above by checking globally installed packages:

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

    Solution

    After you’ve verified that you had a globally installed create-react-app you can uninstall it:

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

    create-react-app also recommends that you do not have a globally installed version:

    If you’ve previously installed create-react-app globally […], we recommend you uninstall the package […] to ensure that npx always uses the latest version.

    – Getting Started: Quickstart, Create React App

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search