JSX element class does not support attributes because it does not have a 'props' property [duplicate]

Question

I have this .tsx file:

import React, { Component } from 'react';

export class SidebarItem extends Component {
  constructor(props) {
    super(props);
  }
  
  render() {
    return (<li>{this.props.children}</li>);
  }
}

However, TypeScript throws this error:

error TS2339: Property 'props' does not exist on type 'SidebarItem'.

Answer 1

The solution is to install the React Types defintions

yarn add -DE @types/react

More details from the typescript docs and from the types repo

On a side note I had to restart vscode for the linting to kick in properly.

Answer 2

TypeScript follows the ES-module specification but React follows CommonJS. This article touches on that among other things.

Importing React like this will fix this problem:

import * as React from 'react';

export class SidebarItem extends React.Component {
    constructor (props) {
        super(props);
    }

    render () {
        return (<li>{this.props.children}</li>);
    }
}