CODEWITHSUNDEEP
reactjstypescript
Tomás Mercado
Tomás Mercado

Reputation: 33

React failed to compile using Typescript

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

Upvotes: 0

Views: 4755

Answers (2)

Tomás Mercado
Tomás Mercado

Reputation: 33

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!

Upvotes: 1

TalOrlanczyk
TalOrlanczyk

Reputation: 1213

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

Upvotes: 0

Related Questions