CODEWITHSUNDEEP
javascriptreactjstypescriptcompiler-errorscreate-react-app
JimmyTheCode
JimmyTheCode

Reputation: 5694

"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?

Upvotes: 3

Views: 1090

Answers (1)

JimmyTheCode
JimmyTheCode

Reputation: 5694

I'm not sure what it was I did exactly, but I got it working. I watched a few youtube vids and tutorials. I'd recommend this one if anyone else is similarly stuck.

I made changes to the following:

package.json

"babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react",
      "@babel/preset-typescript"
    ],
    "plugins": [
      "@babel/plugin-proposal-nullish-coalescing-operator",
      "@babel/plugin-proposal-optional-chaining"
    ]
  },
  "devDependencies": {
    "@babel/preset-typescript": "^7.9.0",
    "@types/material-ui": "^0.21.8",
    "@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"
  }

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",     
    "module": "commonjs",             
    "jsx": "react", 
    "strict": true,      
    "noImplicitAny": false,
    "esModuleInterop": true,
    "skipLibCheck": true,    
    "forceConsistentCasingInFileNames": true 
  }
}

.eslintrc.json

{
    "root":true,
    "parser": "@typescript-eslint/parser",
    "plugins": ["react", "@typescript-eslint", "eslint-plugin-node"],
    "files": ["**/*.ts", "**/*.tsx"],
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": ["plugin:react/recommended", "plugin:@typescript-eslint/recommended"],
...
}

Upvotes: 1

Related Questions