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?

Spavin

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"
    ]
},

Stpierre

That worked but i have no idea why, i'm not even using eslint :P – Spavin

create-react-app comes with eslint. you can check this link: #59633505 – Stpierre

It doesn't work for me.... :(. I'm migrating from js to ts step-by-step. Is that the reason? – Percussive

@C-lioGarcia Do you remember how to solve this? – Ashmead

@Keselme, unfortunately it take to long and I don't remember. Sorry! – Percussive

Answer 2

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

Ambrosane

Thanks, I was adding typescript to a react project, in a CRA setup previously with only javascript with react at ^17.0.2. This addition solved my problem. – Theran

If you're using StandardJS and have the standard config in your package.json, you can change the parser there as well. Mine was originally using @babel/eslint-parser "standard": { "parser": "@typescript-eslint/parser", "plugins": [ "react" ], "env": [ "browser", "jest" ] } – Lavonnelaw