React Typescript Component Unexpected token, expected "{"

I have a react app in typescript that cant compile for unknown reasons. This is the error I get:

./src/App.tsx
SyntaxError: C:UsersLANAUSreposgdn-tabular-appsrcsrcApp.tsx: Unexpected token, expected "{" (12:34)

  10 | 
  11 | // Web socket client connection
> 12 | export class App extends Component<any, any> {
     |                                   ^
  13 |     index = 0
  14 |     connections: httpLib.ClientRequest[];
  15 |     tlm: AxiosInstance;

I cant figure out why it seems to have an issue with <any, any> being in the class definition. From what I can tell it looks like it is applying JS rules to my TSX file. As a test, when I removed <any, any> then the error became:

./src/App.tsx
SyntaxError: C:UsersLANAUSreposgdn-tabular-appsrcsrcApp.tsx: Unexpected token (14:15)

  12 | export class App extends Component {
  13 |     index = 0
> 14 |     connections: httpLib.ClientRequest[];

I am at a total loss here, does anyone know why this is failing to compile?

Additional Relevent Files:

.babelrc

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        [
            "@babel/plugin-transform-react-jsx",
            {
                "runtime": "automatic"
            },
            "@babel/plugin-proposal-class-properties"
        ]
    ]
}

tsconfig.json

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

Source: Ask Javascript Questions

LEAVE A COMMENT