CODEWITHSUNDEEP
reactjstypescript
Jay
Jay

Reputation: 3030

create-react-app with -–template typescript not creating .tsx files

I decided to use React JS with TypeScript. Doing a simple hello world project. Referring two books, and they both suggest the following. Brand new project, not upgrading or any of those scenarios. Starting fresh.

npx create-react-app try-react -–template typescript

That works fine.

But, the files, they still have the .js extension. In the book, one of them has a screenshot, it is already with .tsx extension.

I have looked at this link, https://create-react-app.dev/docs/adding-typescript/. It says,

If you've previously installed create-react-app globally via npm install -g create-react-app, we recommend you uninstall the package using npm uninstall -g create-react-app or yarn global remove create-react-app to ensure that npx always uses the latest version.

Global installs of create-react-app are no longer supported.

So, I removed the global install. tried again.

Same thing. no files with .tsx extension. The book author does not mention anything about having to rename these files manually.

So, my question is,

  1. is the template not supposed to automatically set all extensions to .tsx?
  2. is the only way to do this is to manually change from .js to .tsx?
  3. do we always do this, and that is indeed the norm. Perhaps, the book author did do it manually but forgot to include it in the instructions?

Upvotes: 14

Views: 8487

Answers (5)

Mahesh Inder
Mahesh Inder

Reputation: 1

You need to try two things:

npm uninstall -g create-react-app

or

yarn global remove create-react-app

This should work as of today.

Upvotes: 0

ConwaysLaw
ConwaysLaw

Reputation: 21

Providing an independent answer because I don't have the reputation to comment on or edit @ChrisPabst's answer.

I'm also using the David Choi book, and stumbled across this question for the same reason as the parent...I couldn't get --template typescript to generate typescript files. ChrisPabst's answer got me to look more closely at the difference between commands pasted from the book, and commands directly entered, and sure enough, here's a paste from Chapter 5:

npx create-react-app class-components -–template typescript

Zoom in on the template hyphens, re-pasted here:

-–

Now I type in the hyphens directly:

--

Now let's re-paste the hyphens from the question text itself:

-–

It definitely looks like the first set, not the second.

EDIT: If you get the ASCII values of the above pasted characters (e.g. fire up a python interpreter, and then type ord("–") for each character, the pasted text will give you

45 and 8211

while entering it yourself is 45 and 45.)

tl;dr : If you're using the David Choi book "Full-Stack React, TypeScript, and Node", all of the advice above about cra-react-template is a complete red herring. Paste the command, but before you press enter, go back and type in the double-hyphens yourself. A typescript template will be generated correctly.

Upvotes: 2

ChrisPabst
ChrisPabst

Reputation: 1

For completeness, I believe the book in question is Full-Stack React, TypeScript, and Node by David Choi. I too am learning React from this book, and I also ran into this problem. This issue was not actually in the environment, but in the command itself (which you can see in the original question).

If you are reading the book online, and copy the command to set up a new React app, you get

npx create-react-app hooks-components –template typescript

But the book for some reason has a non-ascii dash instead of the correct --. So the template arg is ignored.

What I kept missing was this error.

npm ERR! arg Argument starts with non-ascii dash, this is probably invalid: –template

So yes it is supposed to work; No you don't have to do anything extra.

Upvotes: 0

Nahuel Taibo
Nahuel Taibo

Reputation: 509

In my case what solved it was installing the typescript template globally

npm install -g cra-template-typescript

Once I did that, I ran

npx create-react-app client-app --template typescript

Ant it worked. All script files where .tsx

Upvotes: 8

Alex Buyny
Alex Buyny

Reputation: 3185

I had the same problem. What solved it for me:

npm install cra-template-typescript

For some reason the template was not there for me.

Upvotes: 6

Related Questions