React failed to compile using Typescript

Question

React doesn't recognize Typescript syntax and a I get this error

    $ yarn start
yarn run v1.22.5
$ react-scripts start
(node:12196) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module r
esolution of the package at C:\Users\tmerc\OneDrive\Escritorio\SoyHenry\app\node_modules\postcss-safe-parser\nod
e_modules\postcss\package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
i ｢wds｣: Project is running at http://192.168.1.102/
i ｢wds｣: webpack output is served from
i ｢wds｣: Content not from webpack is served from C:\Users\tmerc\OneDrive\Escritorio\SoyHenry\app\admin-front\pub
lic
i ｢wds｣: 404s will fallback to /
Starting the development server...
Failed to compile.

./src/components/SelectCourseAndCohort/index.tsx
SyntaxError: C:\Users\tmerc\OneDrive\Escritorio\SoyHenry\app\admin-front\src\components\SelectCourseAndCohort\index.tsx: Unexpected token, expected "," (12:36)

  10 | const useStyles = makeStyles(styles);
  11 |
> 12 | function SelectCourseAndCohort(props: PropsSelectCourseAndCohort) {
     |                                     ^
  13 |
  14 |   const { courseInfo, setCourseInfo, courses, cohorts } = props;

I installed the project in this computer today, in others the problem doesn't exists. Thank u

Do you have typescript in package.json?

Romi Halasz
– Romi Halasz

2020-11-14 14:10:13 +00:00
Commented Nov 14, 2020 at 14:10 — Romi Halasz
– Romi Halasz, Commented Nov 14, 2020 at 14:10
@RomiHalasz Yes. "typescript": "^4.0.3", `

Tomás Mercado
– Tomás Mercado

2020-11-14 14:19:00 +00:00
Commented Nov 14, 2020 at 14:19 — Tomás Mercado
– Tomás Mercado, Commented Nov 14, 2020 at 14:19

Sarun UK · Accepted Answer · 2020-11-14 18:30:53Z

1

Resolved! This project is a subproject, and root have node_modules too. I was having conflicts with this. I deleted all node_modules in root project and all subprojects, and all yarn.lock. Then i did yarn and fix the problem. Thanks for answers!

edited Nov 14, 2020 at 18:30

Sarun UK

6,7667 gold badges26 silver badges51 bronze badges

answered Nov 14, 2020 at 15:14

Tomás Mercado

331 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

TalOrlanczyk · Accepted Answer · 2020-11-14 14:44:55Z

0

if you use react typescript the functional component need to be like this:

const SelectCourseAndCohort:FC<PropsSelectCourseAndCohort> = (props) =>{
//
}

it's due to React in TypeScript that you need to import FC or FunctionalComponent to access those stuff unlike react in JavaScript.

and another question why you use react-script start and not just npm start this due the same

answered Nov 14, 2020 at 14:44

TalOrlanczyk

1,2139 silver badges21 bronze badges

2 Comments

Tomás Mercado Over a year ago

Doesn't work. Now says that expected '(', like if not recognize that I'm using TS. I use 'yarn start' and that runs react-script start

TalOrlanczyk Over a year ago

@TomásMercado can you show the code plz and package.json

Collectives™ on Stack Overflow

React failed to compile using Typescript

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related