Migrating app from react-scripts to react-scripts-ts

[TheTFo]

Hello,
I have an unejected CRA app with react-scripts that I'd like to migrate to react-scripts-ts. Is there documentation on how this can be done?

[wmonk]

To be honest i'm really not sure. One issue you will have is that trying to do create-react-app --scripts-version=react-script-ts . will not work, as there are conflicting files.

⛔⚠️ I am not recommending this approach ⛔⚠️
The only thing I guess could work is to delete all files/directories apart from your .git directory. Then once it's all installed check out those deleted files. As I said above, I am not recommending this, as you might lose all your local git tracked files if you mess it up.

[TheTFo]

I think my best bet may be to create a different app, and manually pull some of the files changes in.

…

On Thu, Jul 13, 2017, 4:18 AM William Monk ***@***.***> wrote: To be honest i'm really not sure. One issue you will have is that trying to do create-react-app --scripts-version=react-script-ts . will not work, as there are conflicting files. ⛔⚠️ *I am not recommending this approach* ⛔⚠️ The only thing I guess could work is to delete all files/directories *apart* from your .git directory. Then once it's all installed check out those deleted files. As I said above, I am *not* recommending this, as you might lose all your local git tracked files if you mess it up. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#108 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAgWoEuu_qH15W94f2ojcY7qEkSqb_UYks5sNdLQgaJpZM4OWdyR> .

[trichards57]

Having just done this, steps I've followed are:

1. Create a temporary project using create-react-app --scripts-version=react-script-ts
2. In your own project, remove react-scripts and add react-scripts-ts
3. Copy tsconfig.json, tsconfig.test.json tslint.json from the temporary project src folder to your project's src folder
4. In package.json, change all the references to react-scripts to react-scripts-ts in the scripts section.

You can now transform all of your javascript over to typescript, not forgetting to install all of your type definitions. At the very least, your src/index.js file will need to be renamed to index.tsx to allow you to start with yarn start.

So far, I haven't had any issues that aren't just due to moving from javascript to typescript.

[duro]

@trichards57 I just went through this exact process, and now I'm running into all kinds of errors like this:

Failed to compile.

./src/utils/fetch.js
Module parse failed: <local_dir>/node_modules/source-map-loader/index.js!<local_dir>/src/utils/fetch.js Unexpected token (36:6)
You may need an appropriate loader to handle this file type.
|     }
|     authAddedOptions.headers = {
|       ...authAddedOptions.headers,
|       Authorization: jwtToken
|     }

I'm sure this is related to migrating from JS -> TS, but I was under the impression that if I left all my other files .js, TypeScript would simply ignore them.

I also saw issue #146 which seems to indicate that react-scripts-ts does not use babel, so it's choking on syntax that would be perfectly acceptable in a react-scripts project.

Did you run into this? How did you get around it?

[trichards57]

@duro
I didn't have any big issues, but I also didn't have any code that required babel. As I understand it, allowJs being set to true (which it is in the template) has the Typescript compiler try and handle all of the JS as well, and so it won't like the babel bits.

[barbalex]

I got dozens of error messages. Tried to research them. After a few hours I decided this was not going to happen :-(

[galvanu]

I also got errors when trying to load .js files, does anyone else succeed with this migration?

[leanderme]

Same here! I am trying to migrate a complex project to Typescript. I've got plenty React components and was planning to migrate them one by one. But once converted, they cant import any unconverted components. Really frustrating.

[quantuminformation]

For this kinda of stuff, always make a new repo and copy over the files.

[quantuminformation]

I even do it with angular 1v+ versions.

[galvanu]

I Found a solution to migrate from js to typescript without eject.
My solution is based on @trichards57 but includes few additional steps and solution for loading .js files from .ts files.

You can find my solution here

[compulim]

@duro this is fixed in 2.9.0. But unfortunately, a blocking bug forced the team to unpublish 2.9.0. The latest as of now is 2.8.0.

react-scripts-ts@2.10.0 will be release when Facebook release newer react-dev-utils@>2.4.1 (which react-scripts-ts#master depends upon).

In the meanwhile, you can use react-scripts-ts#master, by either npm link or npm install-ing a tarball of both react-scripts-ts#master and react-dev-utils#master.