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

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 react-scripts@2.0.6-next.c662dfb0.

Let me know if that works for you!

@sebasmurphy you can close this 😃

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. 😉

@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 git@github.com: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

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

@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 git@github.com: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.

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

@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. 😞

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