CRA 2.0

[samuelcastro]

Any thoughts when will we be able to support CRA 2.0?

There is this PR https://github.com/wmonk/create-react-app-typescript/pull/409, just wondering what's remaining to get it through.

Thanks.

[danielkcz]

@samuelcastro The best what you can do is to install react-scripts-ts@next and check for yourself if it's working and if you find some issues, report it to #409.

And next time please refrain from opening new issues when you are able to find the PR and you see there is a discussion going in there.

To maintainers: I recommend to keep this issue open, or these wil just pile up because people are lazy.

[osdiab]

On a related note, given https://github.com/facebook/create-react-app/pull/4837 provides typescript support via babel, it'd be nice to have a comparison of the benefits of continuing to use react-scripts-ts as opposed to relying on the Babel support (presumably that you're actually using tsc to build).

[benneq]

Is there then any need for further development of this project? I'm still not sure which to chose for the next react / ts projects...

[samuelcastro]

That's what I've been wondering, I'm switching to CRA with native babel7/typescript support.

[danielkcz]

@benneq I think it's a safe bet to choose CRA2 for a new project. However, note that it's not released yet so you have to either wait or somehow get it from a master.

[ppvg]

you have to either wait or somehow get it from a master

It's been published under the next tag (react-scripts@2.0.6-next.9b4009d7). For a new project you can use it like this:

$ npx create-react-app --scripts-version react-scripts@next my-react-app

...and then follow the instructions to add typescript.

[danielkcz]

@osdiab Could you please share your experience with switching to CRA? Does everything work in your project without issue?

[osdiab]

There are a couple stumbling points. One is that with react-scripts-ts you can refer to your code as an absolute import like import x from “src/path/to/module”; to keep that working you need to prepend NODE_PATH=. to your invocations of react-scripts, since cra doesn’t support webpack aliases. EDIT: you can't, what I said worked for the react-scripts@2.0.6 beta, but as of 2.1 that support was fully removed.

Second, Babel 7 resolves modules a little differently than tsc does; I wasn’t using esModuleInterop and allowSyntheticDefaultImports before, but cra will automatically add a few config settings to tsconfig.json when you run react-scripts start, including that. So some imports, like import * as color from “color”, instead needs to be imported as a default import, or the app breaks. will break when you first run it, but I don't think those settings are required, so you can explicitly set them to false. Idk why they force you to explicitly have those properties even though it's not necessary, but they do.

As an aside it only flashes the fact that it modifies your tsconfig.json for like 1 second when running react-scripts start, so if you don’t catch that I can see it being pretty confusing.

Otherwise everything else seems fine! On the nice side, my build seems to be happening significantly faster (though it’s not a big deal to me since I haven’t dropped it in a large project yet, just a tiny static website)

[dfee]

@osdiab did you just checkout master? I checked npm and it doesn't look like there's a release for 2.1 yet.

Ah, I see you're using 2.0.6 -> https://github.com/osdiab/mitaka-house/blob/1fa40cb4ea82332de865cd44b8108a1b46a8605a/package.json#L22

[danielkcz]

@osdiab Thanks for sharing valuable intel. Regarding "paths" there was a question from @borisowsky (https://github.com/facebook/create-react-app/pull/4837#issuecomment-427347263) and he was just ignored. I guess we don't get rid of react-app-rewired that easily. Using tsconfig-paths-webpack-plugin should solve the issue with typescript paths setting.

I am wondering where are those forced tsconfig settings coming from. Looking to the changeset of that PR I don't see it would be setting allowSyntheticDefaultImports anywhere. Perhaps it's something that got removed later?

[MikelArnaiz]

Seems like 2.1 will be out later today https://twitter.com/iansu/status/1055559136153284608

[schneidmaster]

@MikelArnaiz That announcement was for the new version of react-scripts which supports Typescript using babel 7's TS support -- not for this package.

[danielkcz]

@MikelArnaiz But that's what we are talking about in couple last comments ;) This package might not be needed anymore.

[RayLuxembourg]

create-react-app v2 typescript demo

[danielkcz]

@RayLuxembourg That's not much of the demo since it does not contain much of the code. I assume you have just executed CLI. Are there any custom modifications?

I am a bit surprised about react.d.ts file. Is that part of the template or some discovery of yours?

[RayLuxembourg]

@FredyC the react.d.ts is auto generated along with tsconfig via the cli. The only thing I added later on is lazy loaded components and router. The cli doesn't get stuff working straight away, some minor modifications are required to run typescript.

[Timer]

TypeScript is now officially supported as of Create React App 2.1. Read the release notes to get started!

[osdiab]

Looks like upon trying to install 2.1 instead of the 2.0.6 release, absolute imports are explicitly not supported. so if you want to use 2.1 be aware that doesn't work yet, you have to go back to relative imports

[benneq]

What do you mean by "absolute imports"?

[osdiab]

Like importing from the src dir by referring to files by “src/path/to/module” as opposed to “../../path/to/module”, which you can usually achieve in typescript using the paths and baseUrl config options, as well as aliases in webpack

[benneq]

Oh okay, didn't know that this was possible. I actually don't care about imports at all as long as it works. The IDE provides tools for auto import and refactoring. I see no reason to make imports "look pretty". Or is there any other benefit?

[danielkcz]

@benneq What IDE are you using? VSCode? Some extension for auto import? It's just that default autoimport is rather wonky sometimes and does not work as expected. In these cases, it's super helpful to have a shorter path to type :)

[benneq]

VSCode and IntelliJ IDEA / WebStorm. I never had problems with auto imports yet. VSCode sometimes needs a kick/hug if your node_modules folder changes, in order to recognize the packages and files. IDEA / WebStorm work totally flawless. But I really like the clean user interface of VSCode more: Stupid, simple, works.

[whengely]

Just to give my experience with 2.1 last night. I tried converting a project over because giving up aliased imports doesn't bother me too much. However, the linting is not where I'd want it to be. It's currently using ESLint instead of TSLint. I did see that there is an issue started to switch to TSLint so I will not attempt to migrate again until that point.

There was a comment on one of CRA issue threads about not wanting to support no-any. We also extend tslint-immutable at work. If we can configure both in tslint.json after the fact we'll be switching

[shobhitg]

@whengely Same here, I tried converting my project from CRA-TS to CRA 2.1. Facing too many eslint linting issues, (as in my vscode doesn't know where the linting config is, so ide doesn't give error, but I get errors in console). Giving up for now. I too will postpone migrating until tslint is officially supported in CRA 2.1.

[ee0pdt]

Thanks @whengely and @shobhitg. No tslint is a deal-breaker for now

[samuelcastro]

@shobhitg You still can use tslint, just include it manually like:

• yarn add tslint tslint-react tslint-whatever-else-you-use
• tslint.json in your root
• "lint": "tslint -c tslint.json src/*/.{ts,tsx}" (package.json)

[shobhitg]

@samuelcastro if I do that I am sure it would help vscode provide linting errors, but will my build system (yarn start and yarn build) switch from eslint to tslint?

[samuelcastro]

@shobhitg You can call your custom tslint script in the start one, however this is more a workaround than a recommendation, might be better just wait tslint get official: https://github.com/facebook/create-react-app/pull/5697

[danielkcz]

It does support enums, just not the const ones which don't actually generate any runtime code so that's even more surprising that it doesn't work, but who cares, CRA-TS is the way to go for now :)

[WorldMaker]

@samuelcastro @shobhitg Another alternative is to try to use typescript-tslint-plugin in your tsconfig.json. It has a different VS Code plugin (mentioned in the Readme), but is how I've preferred to use tslint for a while anyway. (Some of tslint's rules work better in Typescript plugin form, and overall it's a good experience.)