ts-cjs.md

TypeScript bug when compiling to CommonJS?

tsconfig.json:

{
  "compilerOptions": {
    "rootDir": "ts",
    "outDir": "dist",
    "target": "es2018",
    "lib": [
      "es2018",
      "dom"
    ],
    "module": "commonjs",
    "esModuleInterop": true,
    "strict": true,
    "declaration": true,
    "sourceMap": true,
    "jsx": "react",
  },
  "include": [
    "ts/**/*"
  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}

Output with bug

Input:

import React, { useState, ChangeEvent } from "react";
console.log(React, useState); // useState === undefined

Output:

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
const react_1 = __importDefault(require("react"));
console.log(react_1.default, react_1.useState); // useState === undefined

Problem: react_1 is { "default": mod }, which is why react_1.useState is undefined.

Work-around

Input:

import React from "react";
import { useState, ChangeEvent } from "react";
console.log(React, useState);

Output:

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
const react_1 = __importDefault(require("react"));
const react_2 = require("react");
console.log(react_1.default, react_2.useState);

I'm leaving another alternative for the people landing here:

Integrate TS with babel.