Typescript compiles `tsx` to a wrong type of modue

Question

I'm trying to use Typescript together with Node and React. However I'm struggling to set up the Typescript compiler to use the correct type of the “module convention”. I know that ES6 modules do work correctly, but Typescript always generates a non-standard module syntax that, for some reason, just doesn't work.

.

If I save this code into a .js file, it works correctly:

import React, { Component } from 'react';
import './App.css';

let logo = require('./logo.svg');

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <p>{logo}</p>
      </div>
    );
  }
}

export default App;

However, if I save it to a .tsx file, it compiles to this:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = require("react");
require("./App.css");
let logo = require('./logo.svg');
class App extends react_1.Component {
    render() {
        return (react_1.default.createElement("div", { className: "App" },
            react_1.default.createElement("header", { className: "App-header" },
                react_1.default.createElement("img", { src: logo, className: "App-logo", alt: "logo" }),
                react_1.default.createElement("h1", { className: "App-title" }, "Welcome to React")),
            react_1.default.createElement("p", { className: "App-intro" },
                "To get started, edit ",
                react_1.default.createElement("code", null, "src/App.js"),
                " and save to reload."),
            react_1.default.createElement("p", null, logo)));
    }
}
exports.default = App;

Which results in a Node error react_1.default is undefined. I tried adding a esModuleInterop flag to the Typescript compiler, which added this definition:

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
}

and changed require("react") to __importDefault(require("react")). That fixes the first problem, however react_1.Component is still undefined. Is there a way to set the Typescript compiler to use the standard ES6 modules?

Answer 1

Add this to tsconfig.json:

"compilerOptions": {
  "module": "es6"
}