React Typescript Type Cast Issue - Parsing Error: Missing Semicolon

Question

I have this simple line of code:

const target = e.target as HTMLLIElement;

and I am getting this error:

  Line 18:28:  Parsing error: Missing semicolon
> 18 |     const target = e.target as HTMLLIElement;
     |                            ^

I've looked at dozens of different posts that are similar to my issue but none of them match up just right to my problem or they have solutions that don't really pertain to my project. For example, some have run into eslint issues, but I don't have the eslint package installed. Here is my package.json file:

{
  "name": "ally-autobot",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^6.1.1",
    "@reduxjs/toolkit": "^1.5.1",
    "@tailwindcss/postcss7-compat": "^2.1.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/lodash": "^4.14.168",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "@types/react-redux": "^7.1.7",
    "@types/react-router-dom": "^5.1.7",
    "autoprefixer": "^9",
    "firebase": "^8.4.2",
    "firebase-tools": "^9.10.0",
    "lint": "^0.7.0",
    "lodash-core": "^4.17.19",
    "postcss": "^7",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-firebase-hooks": "^3.0.4",
    "react-redux": "^7.2.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "redux-persist": "^6.0.0",
    "source-map-loader": "^2.0.1",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
    "typescript": "~4.1.5"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

And here is my tsconfig.json file:

{
  "compilerOptions": {
    "sourceMap": true,
    "incremental": true,
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

I've also tried using the angle bracket approach but that doesn't work because I'm in a tsx file. I've tried setting the noImplicitAny to false. I've tried adding semicolons to all expressions in the same file as this error.

Any thoughts on how to resolve this issue?

Answer 1

Should be the error from eslint.

Adding eslintConfig to package.json may solve your problem. The below setting is the default eslintConfig from create-react-app

"dependencies": {
...
},
"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
},

Answer 2

Just put "parser": "@typescript-eslint/parser", in your eslint config file and that should work.