Migrate react-scripts to v2

[brunolemos]

EDIT: I made a PR in the official react-scripts repo: TypeScript support using Babel 7
EDIT: It was merged!

---

Is this a bug report?

No

Description

react-scripts 2.0.0 is almost ready and Dan is asking people to try it out using the next version or forks by using the next branch. It currently have 0 known issues. (see: facebook/create-react-app#3815)

Maybe we could migrate this repo already?
Even if only on a next branch as well, so we can start testing it.

[jergason]

What is the work required for this? I poked around in the repo and was unable to find where we even specify what version of react-scripts we depend on.

[wmonk]

This sounds like a good idea. First need to get #277 merged - then I can concentrate on this next version.

@jergason regarding the work to do this, it will have to come after #277, but essentially involves merging the fb version of cra into this repo and then resolving any merge conflicts.

I will look to revamp the way we do this merge after 2.0. is merged.

[jergason]

@wmonk I'm muddling through this on a branch: https://github.com/jergason/create-react-app-typescript/tree/jergason/update-to-2.0. Do you want me to pause work on this completely until #277?

[gyandeeps]

One of the big one is Webpack 4 upgrade, which is still pending (facebook/create-react-app#4077).
I used create-react-app to create my ts project (i did eject) and then i incorporated stuff from this module to make it work for TS. I just tried webpack 4 and the issue is that it does everything right except it doesnt call our entry module to start executing so the page remains blank (both prod and webpack dev server versions).

[danieldunderfelt]

@gyandeeps I'm seeing the same. When I removed the splitChunks optimization options everything works fine, so you need to do that until we get to the bottom of the bug.

[gyandeeps]

I have realized this happens only if you use ts-loader. If you just use .js files then its fine... (I dont use babel either ways)

[danieldunderfelt]

@gyandeeps hmmm... so ts-loader has a problem with splitChunks. Now we're getting somewhere!

[panmona]

This would be really great. Then I could finally move over to CSS modules.

[danieldunderfelt]

@maracuja-juice @gyandeeps I found the solution. You need to put this plugin in front of html-webpack-plugin, where the fault seems to be: html-webpack-include-sibling-chunks-plugin.

See the full Webpack 4 implementation I made in this PR to the open source boilerplate my team uses: https://github.com/digiaonline/react-boilerplate/pull/86/files#diff-96f3236c864bf3b9b45321218336dca0

[gyandeeps]

Thanks for the investigation and solution @danieldunderfelt .
I do feel like that if this was a problem in general with webpack then using the above plugin makes sense regardless of TS or JS project. Why I say this is because if i just replace the index.ts file with index.js with no other changes, things start working again.
I am gng to add this to my setup now and hopefully this doesnt create more problems in the future.

Thanks again for the work.

[brunolemos]

Does anyone have a working branch / instructions on how to use react-scripts v2 with typescript?

[gilbsgilbs]

I got it somewhat working: https://github.com/gilbsgilbs/create-react-app-typescript/tree/next-ts

As mentioned in the commit message:

Not working:
- Had to comment out serviceWorker script (must be ported to TS)
- Build command seems to work, but raises an error at the end
- Everything is a bit slow. Don't know if it's normal or not.