"Failed to Compile" "Parsing error: Unexpected token :" during attempt to migrate to typescript in existing create-react-app

I have an existing create-react-app that I’m trying to migrate from javascript to typescript. I followed the migration guide on create-react-app.dev and installed the following:
npm install --save typescript @types/node @types/react @types/react-dom @types/jest

I then copied and pasted the code from Material-UI’s example on this codesandbox example, into ResponsiveDrawer.tsx. When I start my server I get:

Failed to compile.

./src/components/ResponsiveDrawer.tsx
src/components/ResponsiveDrawer.tsx
  Line 21:36:  Parsing error: Unexpected token :

The line identified is:

const useStyles = makeStyles((theme: Theme) =>

I’ve played with my eslint config and downloaded various plugins. My package.json contains:

    "@babel/preset-typescript": "^7.9.0",
    "@types/react-router-dom": "^5.1.7",
    "@typescript-eslint/eslint-plugin": "^4.24.0",
    "@typescript-eslint/parser": "^4.24.0",
    "eslint": "^7.27.0",
    "eslint-plugin-import": "^2.23.3",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-react": "^7.23.2",
    "typescript": "^3.9.9"

I initially had linting errors highlighted in the .tsx file, but that seems to have been resolved by adding the above. I’m still having problem compiling the app though. Does anyone know how to resolve?

Source: Ask Javascript Questions

LEAVE A COMMENT