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"
]
}
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
.
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: