Typescript 2.1 React cannot find module.

Question

I'm making a simple React/express app and I'm having an issue with the Typescript compiler and my components container.jsx

import * as React from "react";

export default class Container extends React.Component{
  getInitialState(){
    return {
      state: ""
    }
  }

  render(){
    return (
      <div>hello world</div>
    )
  }
}

server.ts

import * as express from "express";
import Container from "../components/container";
import * as ReactDOM from "react-dom";
let app = express();
app.get("/",(req, res)=>{
  ReactDOM.render(<Container/>,document.getElementById("app"));
});


app.listen(9999,()=>{

});

VS code highlights the callback inside app.get and says Argument of type 'Container' is not assignable to parameter of type 'Component<any, any>'. Property 'setState' is missing in type 'Container'. Argument of type 'Container' is not assignable to parameter of type 'Component<any, any>'. Property 'setState' is missing in type 'Container'.

when I run the compiler I get errors about regular expressions on . I'm using Typescript 2.1, last night's build.

Answer 1

In your server.ts, the ReactDOM.render(...) method transpiles to this:

ReactDOM.render(React.createElement(Container, null), document.getElementById("app"));

Notice how there is a React.createElement(...) method is substituted in place of <Container /> . Because of this, you have to import * as React from 'react' inside of your server.ts file to satisfy the transpiled React variable, which should satisfy the type mismatch.