14

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?

2 Answers 2

Reset to default
17

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"
    ]
},
5
  • That worked but i have no idea why, i'm not even using eslint :P
    – j will
    Commented May 6, 2021 at 17:57
  • create-react-app comes with eslint. you can check this link: stackoverflow.com/questions/59633005/…
    – Mic Fung
    Commented May 6, 2021 at 17:59
  • It doesn't work for me.... :(. I'm migrating from js to ts step-by-step. Is that the reason?
    – C-lio Garcia
    Commented Dec 10, 2021 at 18:30
  • @C-lioGarcia Do you remember how to solve this?
    – Keselme
    Commented May 11, 2023 at 18:29
  • @Keselme, unfortunately it take to long and I don't remember. Sorry!
    – C-lio Garcia
    Commented May 13, 2023 at 16:14
16

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

2
  • 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.
    – Akshay Choudhry
    Commented May 20, 2022 at 13:07
  • 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" ] }
    – Tash
    Commented Mar 1, 2023 at 16:56

Not the answer you're looking for? Browse other questions tagged or ask your own question.