Typescript in a React project is no longer recognizing the 'as' keyword

Question

I upgraded my 'react-scripts' to the latest version to get rid of a "'React' used before defined" error. I also upgraded to the latest version of typescript.

Now I'm receiving the following:

Failed to compile.

src\components\NearBy.tsx
Line 26:61:  Parsing error: Unexpected token, expected ","

  24 |     const [customers, setCustomers] = useState<Array<any>>([]);
  25 |     const [activeMenuIdx, setActiveMenuIdx] = useState(0);
> 26 |     const [activeCustomer, setActiveCustomer] = useState({} as ICustomerDetail);
     |                                                             ^
  27 |     const [nearBySettings, setNearBySettings] = useState({} as any);

I thought it might be the cast of an object to an interface, but the following line (27) will generate the same error, when using 'any'.

package.json

{
    "name": "microsoft-teams-ext",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@fluentui/react-northstar": "^0.49.0",
        "@microsoft/teams-js": "^1.6.0",
        "@types/classnames": "^2.2.11",
        "@types/react": "^16.9.53",
        "@types/react-dom": "^16.9.8",
        "@types/react-router-dom": "^5.1.6",
        "@typescript-eslint/eslint-plugin": "^4.6.1",
        "@typescript-eslint/parser": "^4.6.1",
        "bingmaps": "^2.0.3",
        "classnames": "^2.2.6",
        "msteams-react-base-component": "^2.1.0",
        "msteams-ui-styles-core": "^0.8.2",
        "react": "^16.13.1",
        "react-dom": "^16.13.1",
        "react-router-dom": "^5.1.2",
        "react-scripts": "^4.0.0-next.117",
        "typescript": "^4.0.5",
        "typescript-collections": "^1.3.3",
        "typestyle": "^2.1.0"
    },
    "resolutions": {
        "**/@typescript-eslint/eslint-plugin": "^4.6.1",
        "**/@typescript-eslint/parser": "^4.6.1"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "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"
        ]
    },
    "msteams": {
        "teamsAppId": "89b9dfb3-98d2-4b90-9926-2ddf8e4a6aad"
    },
    "eslintConfig": {
        "rules": {}
    }
}

tsconfig.json

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

At which point do you receive the error? Is it compiler or linter error? I expect it to be the second because TS itself shouldn't have problems with "as". See https://stackoverflow.com/questions/60547153/eslint-parsing-error-unexpected-token-on-typescript-cast-operator-as — Estus Flask, Nov 06 '20 at 16:05
@EstusFlask The failure messages show after a "Failed to compile" message is output. So I'm assuming it's during compile. (I'm new to this whole NPM world, so forgive my ignorance.) — Danno, Nov 06 '20 at 16:17
If there's an error, please post it. You likely truncated parts that could give some clues. — Estus Flask, Nov 06 '20 at 16:19
@EstusFlask All there is, is what's posted in the first output snippet. (Other than the file name that has the problem.) — Danno, Nov 06 '20 at 16:22
This is where you can start digging. It can be debugged on your side. Check https://stackoverflow.com/questions/59752057/npm-run-build-failed-to-compile-cannot-get-to-build-reactjs-project . — Estus Flask, Nov 06 '20 at 16:33
I've tried adding // eslint-disable-next-line and that still generated the error. — Danno, Nov 06 '20 at 16:37
It fails at parsing the file so it didn't reach this point. You can try to add ts(x) files to Eslint ignore. — Estus Flask, Nov 06 '20 at 18:40

score 3 · Answer 1 · edited Dec 14 '20 at 13:14

3

Add the following configuration in package.json:

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

edited Dec 14 '20 at 13:14

41 72 6c

1,600
5
19
30

answered Dec 14 '20 at 11:15

spy

39
6

I had this issue after upgrading, and I had assumed it was something like this (I don't keep up to date with JS / TS world). Do you have any idea why this was added to the package.json instead of being the default like before? – Caustic Dec 19 '20 at 20:47
Adding this had no effect for me. I'm using VS Code. I'm curious if you have any suggestions at https://stackoverflow.com/q/67522592/470749 Thanks. – Ryan May 13 '21 at 18:37

Typescript in a React project is no longer recognizing the 'as' keyword

1 Answers1

Linked