Create-react-app: Typescript: Simplified typescript steps not working

[sebasmurphy]

Is this a bug report?

Yes

Did you try recovering your dependencies?

Yes

Environment

Environment:
OS: macOS 10.14
Node: 10.12.0
Yarn: 1.10.1
npm: 6.4.1

Packages: (wanted => installed)
react: ^16.5.2 => 16.5.2
react-dom: ^16.5.2 => 16.5.2
react-scripts: 2.0.5 => 2.0.5

Steps to Reproduce

I noticed that typescript was added to the project officially. I went ahead and created a new project and followed in the instructions detailed in https://github.com/facebook/create-react-app/commit/3c11efe206d7ffe1ea75ebf32aa207ddfd8c0499 but they did not work. I've walked back through the commit history and tried some of the previously detailed steps to no avail. Neither creating a tsconfig.json or a tsconfig.json with {} in the file worked for me either.

Followed instructions listed at https://github.com/facebook/create-react-app/blob/master/docusaurus/docs/adding-typescript.md

1. npx create-react-app
2. yarn add typescript @types/react @types/react-dom @types/jest
3. Rename src/index.js to src/index.tsx

Expected Behavior

I expected the app to start correctly

Actual Behavior

Received an error .

Could not find a required file.
  Name: index.js

Reproducible Demo

https://github.com/sebasmurphy/prototype-react-typescript

[mikfoo]

I believe the issue is the fact that - while the PR was merged in - they have not yet published a new version of react-scripts which includes these changes.

Last publish was 9 days ago: https://www.npmjs.com/package/react-scripts

[sebasmurphy]

Ahh totally forgot to check that.

I assumed it had already been done given all of the recent commits to master in /packages/react-scripts

[tomaszwylezekperform]

Is known when the new version will be published?

[mikfoo]

Not sure, but would be awesome if it was at least published to canary or a different tag.

[brunolemos]

react-scripts: 2.0.5 => 2.0.5

Not a bug, it's just that v2.1 wasn't published yet. It should be really soon!

You can use the yarn link method for now.

~- npx create-react-app appname --scripts-version=@brunolemos/react-scripts~
~- cd appname~
~- yarn add --dev typescript @types/react @types/react-dom @types/jest~
~- git mv src/index.js src/index.tsx~
~- yarn start~

~_Note: It's possible the steps above don't work 100% because I only published react-scripts, but the other packages from the monorepo should be published as well._~

[nielsdB97]

@brunolemos I'm currently using react-scripts-ts which I think was also recommended in the CRA readme. Do you think it would be a good idea to add a migration guide for people coming from react-scripts-ts to switch to react-scripts?

[brunolemos]

@nielsdB97 Not sure, because it's very simple. The user just needs to remove any mention of react-scripts-ts, install the latest react-scripts and the dependencies from the docs.

Anything different than this only makes sense to be on react-scripts-ts docs, not on create-react-app, for example removing the tsconfig.prod.json file and running tslint on a pre-commit hook.

[nielsdB97]

@brunolemos if that's all there is to it then I would agree it's not necessary to have a migration guide. However I figured there might be some differences in the configs, for example how react-scripts-ts requires you to have separate tsconfig.json, tsconfig.prod.json and tsconfig.test.json.

I actually just tried replacing react-scripts-ts with @brunolemos/react-scripts on the latest version, but it fails to compile src/index.tsx on the first TS syntax it encounters. Is there something I'm doing wrong or is this expected because I'm maybe missing something?

PS: Thanks a lot for your efforts, this is what was keeping me from using CRA 😄

[brunolemos]

@nielsdB97 It's because I didn't publish the other required packages, sorry.

Please wait for the official release or use this method instead:

npx create-react-app@next app-name --scripts-version=2.0.6-next.c662dfb0 --typescript

---

Older method using yarn link:

• Clone
  
  
  
  • git clone [email protected]:facebook/create-react-app.git
  
  
  • cd create-react-app
  
  
• Compile
  
  
  
  • yarn
  
  
• Create link
  
  
  
  • cd packages/react-scripts/
  
  
  • yarn link
  
  
• Create new project / Go to your existing project
  
  
  
  • cd ~/your/projects/folder
  
  
  • npx create-react-app app-name
  
  
  • cd app-name
  
  
• Use Link
  
  
  
  • yarn link react-scripts
  
  
• Setup TypeScript
  
  
  
  • Follow the steps from the readme: Adding TypeScript
  
  
• Finish
  
  
  
  • yarn start
  
  

[Paul-Colucci]

@brunolemos is there an estimated time frame on when the new package will be available?

[brunolemos]

@Paul-Colucci I don't have control over when it will be released, so I don't know. But if 2.1 will only contain typescript, it could be any time now.

[nielsdB97]

@brunolemos I just followed your instructions and linked my local react-scripts checkout to my project. It fails to compile however, since it doesn't recognize my absolute imports based on compileroptions.baseUrl config in tsconfig.json (which works fine under react-scripts-ts).

Is this because it uses Babel and not the standard TS compiler? If so, do you think we can/want to support this functionality by default?

[gaearon]

I assumed it had already been done given all of the recent commits to master in /packages/react-scripts

Things that land in master might not get released for weeks or even months (in the worst case). When things get released, they appear in the changelog and on the releases page. 😉

[xiaoxiangmoe]

@gaearon Can we put @types/react into the repo of react?

[sebasmurphy]

@gaearon yeah that's my bad, I jumped the gun a bit. I saw some tweets and discussion on hnews and assumed a new version had been released with the changes. However the aforementioned posts were just referencing the fact that the code had been merged. 😞

[hinsxd]

@nielsdB97 It's because I didn't publish the other required packages, sorry.

Please wait for the official release or use this method instead:

• Clone

  • git clone [email protected]:facebook/create-react-app.git
  • cd create-react-app

• Compile

  • yarn

• Create link

  • cd packages/react-scripts/
  • yarn link

• Create new project / Go to your existing project

  • cd ~/your/projects/folder
  • npx create-react-app app-name
  • cd app-name

• Use Link

  • yarn link react-scripts

• Setup TypeScript

  • Follow the steps from the readme: Adding TypeScript

• Finish

  • yarn start

However when I tried to import scss files, the following error appears:

./src/App.scss (/Users/hinsxd/projects/create-react-app/node_modules/css-loader??ref--6-oneOf-5-1!/Users/hinsxd/projects/create-react-app/node_modules/postcss-loader/src??postcss!/Users/hinsxd/projects/create-react-app/node_modules/sass-loader/lib/loader.js!./src/App.scss)
To import Sass files, you first need to install node-sass.
Run `npm install node-sass` or `yarn add node-sass` inside your workspace.

The create-react-app folder is the root folder of create-react-app clone. It seems there are some issues in resolving symbolic links that react-scripts does not know that root path of the project.
I added console.log(__dirname) at the very first line of the script, found out that it wasn't inside node_modules, but the cloned directory.
Perhaps (https://github.com/strothj/react-app-rewire-typescript-babel-preset/issues/30) would be a safer method.

[brunolemos]

Please use this new method instead of yarn link:

npx create-react-app@next app-name --scripts-version=2.0.6-next.c662dfb0 --typescript

For existing projects, run yarn unlink react-scripts and install yarn add [email protected].

Let me know if that works for you!

@sebasmurphy you can close this :)

[sebasmurphy]

Closing...