Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Friction in TypeScript setup experience #6119

Closed
DanielRosenwasser opened this issue Jan 3, 2019 · 9 comments

Comments

@DanielRosenwasser
Copy link

commented Jan 3, 2019

In trying to update the TypeScript React Starter, I'm trying to leverage the newly supported support in CRA; however, running create-react-app with the --typescript flag seems to not do anything, and the process of adding TypeScript in general has a bit of friction.

As an example, I ran

npx create-react-app myapp --typescript

I expected at least the following:

  1. My files should have been .ts/.tsx files.
  2. A prescriptive tsconfig.json file should have been given to me out of the box.
  3. My devDependencies should have included typescript, @types/react, and @types/react-dom.

Instead,

  1. The --typescript flag didn't do anything special, and I had to rename a file like App.js to App.tsx before yarn start gave me a tsconfig.json.
  2. yarn start told to run yarn add typescript after the rename (which is misleading since it should be a devDependency - so yarn add -D typescript).
  3. Running yarn start one more time, I was given a type-error because I was missing @types/react and @types/react-dom as devDependencies.

Then everything worked, but this feels extremely frictiony. And it's also fairly confusing, because this flag doesn't seem to give anything beyond what the standard CRA scaffolding gives. And other issues have pointed this out too:

@iansu

This comment has been minimized.

Copy link
Collaborator

commented Jan 4, 2019

The issue is #5939 was that npx was using an old, cached version of Create React App. Perhaps the case for you too?

@Timer

This comment has been minimized.

Copy link
Collaborator

commented Jan 4, 2019

I'm guessing we should file a bug with npx or find an alternative way of creating apps, does "npm init react-app" behave differently?

@iansu

This comment has been minimized.

Copy link
Collaborator

commented Jan 4, 2019

npm init appears to use npx under the hood so I imagine the behaviour would be the same: https://docs.npmjs.com/cli/init#description

I agree though, this has happened a few times so it's probably worth mentioning it to npm.

@mrmckeb

This comment has been minimized.

Copy link
Collaborator

commented Jan 4, 2019

@DanielRosenwasser I can confirm that I'm not hitting this issue on my machine either, I don't have a global install of create-react-app.

Could you confirm if you do?

Also, have you tried running yarn create react-app --typescript? Does that perform the same way?

@mccombsr

This comment has been minimized.

Copy link

commented Jan 5, 2019

I am running into the same issue right now trying to create my first typescript react app using npx create-react-app myapp --typescript. I have create-react-app installed globally.

@ianschmitz

This comment has been minimized.

Copy link
Collaborator

commented Jan 5, 2019

If you're using npx, make sure you don't have create-react-app installed globally, as it will used the installed version i believe.

npm uninstall -g create-react-app

@mccombsr

This comment has been minimized.

Copy link

commented Jan 5, 2019

@ianschmitz You were right, I globally uninstalled create-react-app (and typescript just to be safe) and it worked this time around! Thanks for the help!

@stale

This comment has been minimized.

Copy link

commented Feb 7, 2019

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

@stale stale bot added the stale label Feb 7, 2019

TaylorBriggs added a commit to TaylorBriggs/create-react-app that referenced this issue Feb 9, 2019

Add note about npx caching and link to facebook#6119
It is necessary to uninstall any version that was previously installed for the typescript flag to work when using npx.
@stale

This comment has been minimized.

Copy link

commented Feb 12, 2019

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.

@stale stale bot closed this Feb 12, 2019

@lock lock bot locked and limited conversation to collaborators Feb 17, 2019

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
6 participants
You can’t perform that action at this time.