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: https://github.com/facebook/create-react-app/issues/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 (https://github.com/facebook/create-react-app/pull/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.

[danieldunderfelt]

@gilbsgilbs Here is the final PR that was merged into Digia's React boilerplate: https://github.com/digiaonline/react-boilerplate/pull/86/files

It works well and I've already used in a few different Typescript projects. I also nuked the serviceworker, as it isn't really necessary for us, but the build script works without errors.

[brunolemos]

@gyandeeps One of the big one is Webpack 4 upgrade, which is still pending

Webpack 4 is now in create-react-app next branch

[raptoria]

any update on moving to react-scripts v2?

[DorianGrey]

It will be merged after its release.

[brunolemos]

I made a related PR in the official react-scripts repo: TypeScript support using Babel 7

[ngduc]

with @brunolemos PR, will we still have "create-react-app-typescript" support react-scripts@next (webpack4) ?

[Ciaran0]

Theres been an update to what will be shipping in V2. https://github.com/facebook/create-react-app/issues/5024

Do we think it'll be hard to merge these in? would be nice to test it out. I can help out with whatever.

[akestner]

Having just spun up a new TS / CRA project this week, I'm curious about the status of this as well. Any updates?

[wmonk]

I’ve started working on this today. Will be about in the next week or so

[akestner]

Awesome, thanks @wmonk!

[TroySchmidt]

Cannot wait!!! I ejected to manually migrate to Webpack 4 and cannot wait until this is just part of the scripts.

[franklixuefei]

How's the progress?

[chapterjason]

@franklixuefei https://github.com/wmonk/create-react-app-typescript/pull/409

[daniele-zurico]

sorry @chapterjason but this command is to update an existing app or to create a new one: create-react-app <MY_APP> [email protected] thanks

[xiaoxiangmoe]

@wmonk In order to maintain the same behavior as the create-react-app,we need use 'App.module.css' rather than using 'App.css' to enable css-module

[EduardoAC]

How is it going the migration? I want to add relay but babel configuration doesn't pick the plugin

[justingrant]

How does new CRA support for TypeScript with Babel (https://github.com/facebook/create-react-app/pull/4837 -- thanks @brunolemos!) affect create-react-app-typescript?

[nickmccurdy]

This project uses ts-loader, so it doesn't need Babel. However, there are some features missing from CRA 1 and CRA TS that are now in CRA 2.

[darewreck54]

Hi @daniele-zurico,

Is there any known issues with the setup produced create-react-app <MY_APP> [email protected]?

Thanks, Derek

[KhodeN]

CSS Modules feature needs for additional .d.ts with

declare module '*.module.css' {
  const styles: any;
  export default styles;
}

[KhodeN]

I have also remembered: feature for importing SVG as React.Component doesn't work.

[dosentmatter]

CRA 2.0 now officially supports Typescript but it uses Babel instead of ts-loader. If you want to migrate, here is a guide taken from the CRA 2.0 user docs.

The first few paragraphs describe why you might or might not want to switch. In summary, babel supports typescript, but not all features like namespaces:

Create React App 2.1.0 just arrived with TypeScript support! While Will Monk’s fork create-react-app-typescript has served us well, being able to use the official version has a number of advantages. Most importantly: it is supported by the full weight of the Create React App team, and will therefore stay closely aligned with React proper and will always have up-to-date documentation. Furthermore, you are able to use everything that is supported by Create React App, like Sass.

The implementation also deviates a bit from create-react-app-typescript’s. Most importantly, TypeScript is only used for type checking, whereas transpilation is done by Babel. The disadvantage of this is that you are behest to the caveats of Babel’s TypeScript support, most notably the lack of namespaces and having to use the x as Foo type casting syntax. In practice, however, it is unlikely that these caveats will affect a React app, and the upside is that you are now able to tap into Babel’s extensive ecosystem.

This is the only solution for until create-react-app-typescript gets updated with react-scripts@2, if you need to use CRA 2.0 features such as webpack 4, sass, css modules, etc.

[KhodeN]

@dosentmatter I am using react-scripts-ts ^4.0.8 and it is quite stable (with CRA 2 support). I like strict tslint/tsconfig rules in react-scripts-ts.

[dosentmatter]

@KhodeN Oh, I wasn't aware that react-scripts-ts supported CRA2. I didn't see any news about it on this github, besides wmonk saying he was working on it. However, I did see 4.08 as next on npm. I couldn't find anything that said 4.08 supports CRA2.

I know react-scripts-ts supports tslint and tsconfig in the webpack config.

Does CRA2-typescript not have tslint? I also like tslint. I think it should have a tsconfig since the user docs mention it.

[KhodeN]

4.0.8 built on CRA2. It supports CSS Modules (with some additiaonal type definition), uses webpack 4 and so on. react-scripts-ts has tslint, built in dev-server. It is very cool. It runs and checks on each recompile.

Stock CRA2 has tsconfig also, but without resctrictions by default such as noImplicitReturns, noImplicitThis, strictNullChecks etc.

[dosentmatter]

So does stock CRA2 have tslint and tslint built into dev-server? Or does it just use eslint? From what I can tell from the webpack config, it looks like eslint is only run on files with javascript extension and not typescript extension.

I'm sure you could rewire the config to run eslint with typescript-eslint-parser on typescript files. But you could also rewire in tslint. I would choose either eslint or tslint so I don't have to bother with syncing configs.

If you don't care about linting integration with webpack, you could also just run linting separately.

[Vinnl]

@dosentmatter CRA2 includes TSLint, but its settings are less strict than with cra-ts. Most notably, it restricts itself to things that can cause errors, and deliberately does not configure stylistic issues. See #333.

That said, I do believe you can simply add your own tslint.json with stricter rules. And you can still enforce it - e.g. through a precommit hook, in your editor, and/or in your CI server.

[dosentmatter]

@Vinnl, I know CRA2 supports typescript. But I'm pretty sure it doesn't support tslint. Here are some sources that say tslint isn't in CRA2: https://github.com/facebook/create-react-app/pull/4837 https://github.com/facebook/create-react-app/pull/4837#discussion_r222292618 https://github.com/facebook/create-react-app/pull/4837#discussion_r223075439 https://github.com/facebook/create-react-app/pull/4837#discussion_r223351696

Since CRA philosophy is to only lint for errors, they think typescript is already good enough for that and tslint isn't required for now.

So CRA2 is less strict than cra-ts because it doesn't have a linter. It only has the typescript type checker.

The #333 issue you linked is related to the tslint in cra-ts and not CRA2.

cra-ts supports typescript and tslint.

Yes, I agree you can still add your own tslint.json to CRA2. I haven't decided if I like style linting in my editor, webpack devServer/build, separate command, precommit hook, or CI server. I currently use all methods but haven't set up precommit yet. And editor linting isn't enforced.

cra-ts allows editing the tslint.json and runs it during webpack. To have this functionality in webpack for CRA, you have to rewire your webpack config.

[Vinnl]

@dosentmatter Sorry you're right, my memory didn't serve me that well. It at this point does not include TSLint, though given their philosophy, I would expect them to include it later for the reasons mentioned above, with the loose settings. (And that it would use loose settings is why I linked #333.)

[deftomat]

I think that you can use https://github.com/Microsoft/typescript-tslint-plugin as CRA supports custom tsconfig. (I didn't try it)

[darewreck54]

Just curious. Any reason for the move away from Ts-loader to Babel for trans compiling the typescript code?

On Nov 20, 2018, at 2:44 AM, Kevin Lau <[email protected]mailto:[email protected]> wrote:

CRA 2.0 now officially supports Typescript but it uses Babel instead of ts-loader. If you want to migrate, here is a guidehttps://vincenttunru.com/migrate-create-react-app-typescript-to-create-react-app/ taken from the CRA 2.0 user docshttps://facebook.github.io/create-react-app/docs/adding-typescript.

The first few paragraphs describe why you might or might not want to switch. In summary, babel supports typescript, but not all features like namespaces:

Create React App 2.1.0 just arrived with TypeScript support! While Will Monk’s fork create-react-app-typescript has served us well, being able to use the official version has a number of advantages. Most importantly: it is supported by the full weight of the Create React App team, and will therefore stay closely aligned with React proper and will always have up-to-date documentation. Furthermore, you are able to use everything that is supported by Create React App, like Sass.

The implementation also deviates a bit from create-react-app-typescript’s. Most importantly, TypeScript is only used for type checking, whereas transpilation is done by Babel. The disadvantage of this is that you are behest to the caveats of Babel’s TypeScript support, most notably the lack of namespaces and having to use the x as Foo type casting syntax. In practice, however, it is unlikely that these caveats will affect a React app, and the upside is that you are now able to tap into Babel’s extensive ecosystem.

This is the only solution for now if you need to use CRA 2.0 features such as webpack 4, sass, css modules, etc.

— You are receiving this because you commented. Reply to this email directly, view it on GitHubhttps://github.com/wmonk/create-react-app-typescript/issues/284#issuecomment-440227785, or mute the threadhttps://github.com/notifications/unsubscribe-auth/APbCzkqCsaminrGw2hbMUdcG5IcNzOmqks5uw90EgaJpZM4S59XF.