Codesandbox-client: Replace React+Typescript template

[vitkon]

🌈 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

• remove create-react-app my-app --scripts-version=react-scripts-ts
• instead use create-react-app my-sandbox --typescript to create a new React+TS sandbox

[fawmi]

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/

[CompuIves]

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.

[fabb]

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?

[CompuIves]

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.

[sw-yx]

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

[CompuIves]

The react-ts sandbox should be fixed, but I forgot to add the typing dependencies. I'll add them now!

[jimthedev]

@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.

[CompuIves]

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 [e-mail]
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
.

[jimthedev]

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 (
[email protected]) 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 [e-mail]
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
.

[SaraVieira]

Hey!

The issue is that CRA doesn't seem to support tsx, by changing to TS it yells

A LOT ahha

https://codesandbox.io/s/7knpr7k55x

[sw-yx]

@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

[vitkon]

@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

[CompuIves]

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.

[lbogdan]

@CompuIves swears this is now fixed 🙂 , are you folks still seeing issues?

[jimthedev]

I added typescript as a dependency and everything is working now I think?

[JasonKleban]

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!

[fawmi]

@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";

[SaraVieira]

This issue seems to be fixed as we work with pure CRA now :)