Closed vitkon closed 4 years ago
I believe CRA v2 uses babel for typescript files, which do not provide compile time type checking the way tsc does. That is why I do not believe using CRA is a good idea for ReactTS sandboxes. https://blogs.msdn.microsoft.com/typescript/2018/08/27/typescript-and-babel-7/
Hmm yes, I agree. We already support typescript files in the new
template. I think it's just a matter of switching the IDs to a proper react preset.
I noticed that in the current React + TS Preset, when I create a GitHub repo, suddenly a lot of unnecessary and confusing files pop up like index.js
, registerServiceWorker.js
, and also App.tsx
since index.tsx
defines its own const App
.
Should I create a new issue for this, or does this fit here?
Good point @fabb, it fits in here. When we replace the React+TS with just the React one with TS files we'll have a better export. I'll focus on this today.
just swimming by here to comment that this doesnt seem to have been done yet - also needs to import @types/react and @types/react-dom. Tried to look at the Templates code but unfortunately couldnt figure out which args i need to use to make a working PR
The react-ts
sandbox should be fixed, but I forgot to add the typing dependencies. I'll add them now!
@CompuIves are you sure this is working? I am seeing no type checking in places like https://codesandbox.io/s/5kkl8v19o4 where I'd expect to see it totally yelling at me.
Hey! I'm getting this: [image: Screenshot 2019-02-21 at 22.35.52.png]
What are you getting?
On Thu, Feb 21, 2019 at 8:47 PM Jim Cummins notifications@github.com wrote:
@CompuIves https://github.com/CompuIves are you sure this is working? I am seeing no type checking in places like https://codesandbox.io/s/5kkl8v19o4 where I'd expect to see it totally yelling at me.
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/CompuIves/codesandbox-client/issues/1303#issuecomment-466140194, or mute the thread https://github.com/notifications/unsubscribe-auth/AAj1CGT5mnlI5HizyrBh3GK1YQW5zLdbks5vPvfYgaJpZM4Yl3xZ .
Weird. It looks like github didn’t pick up your screen shot. Can you re-upload?
On February 21, 2019 at 3:36:46 PM, Ives van Hoorne ( notifications@github.com) wrote:
Hey! I'm getting this: [image: Screenshot 2019-02-21 at 22.35.52.png]
What are you getting?
On Thu, Feb 21, 2019 at 8:47 PM Jim Cummins notifications@github.com wrote:
@CompuIves https://github.com/CompuIves are you sure this is working? I am seeing no type checking in places like https://codesandbox.io/s/5kkl8v19o4 where I'd expect to see it totally yelling at me.
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub < https://github.com/CompuIves/codesandbox-client/issues/1303#issuecomment-466140194 , or mute the thread < https://github.com/notifications/unsubscribe-auth/AAj1CGT5mnlI5HizyrBh3GK1YQW5zLdbks5vPvfYgaJpZM4Yl3xZ
.
— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/CompuIves/codesandbox-client/issues/1303#issuecomment-466176631, or mute the thread https://github.com/notifications/unsubscribe-auth/AAGpis4pueL51IxPwXHCugWYgiOZOcvZks5vPxFugaJpZM4Yl3xZ .
Hey!
The issue is that CRA doesn't seem to support tsx, by changing to TS it yells
A LOT ahha
@SaraVieira you have to rename the files to .tsx extension and it works: https://codesandbox.io/s/5yoq2pzv9n
this was an intentional typescript decision that files with jsx in it must have .tsx extension. source: https://github.com/Microsoft/TypeScript-React-Starter/issues/4
@fawmi Compile time type checking works well in CRA 2. It even has a nice formatter (better than TS does). The only limitation is you have to stay away from "const enum" in your TS
I was getting this @jimthedev
It could be that the type definitions were downloaded too late, I fixed that bug locally but haven't deployed it yet.
@CompuIves swears this is now fixed 🙂 , are you folks still seeing issues?
I added typescript as a dependency and everything is working now I think?
This issue is still open but the comments seem like it would be closed. However, I can't get import styles from "./styles.scss";
or import styles from "./styles.less";
to work - gives ts(2307) Cannot find module './styles.scss'.
. Am I just doing it wrong, or is there no support for css-modules still? Thanks!
@JasonKleban The module file names should be filename.module.extension
https://create-react-app.dev/docs/adding-a-css-modules-stylesheet
Rename your styles.scss
to styles.module.scss
and import it as
import styles from "./styles.module.scss";
This issue seems to be fixed as we work with pure CRA now :)
🌈 Replace React+Typescript template
Current state
Currently react-scripts are used to create React+TS sandbox.
e.g.
create-react-app my-sandbox --scripts-version=react-scripts-ts
However, it lacks the recent features from CRA v2 (e.g. CSS modules support).
CRA v2 also supports creating a React+TS projects now.
Suggested solution
create-react-app my-app --scripts-version=react-scripts-ts
create-react-app my-sandbox --typescript
to create a new React+TS sandbox