React 未定义（无法读取未定义的属性“createElement”）

Question

我正在尝试将一个可以工作的 ReactJS 应用程序转换为 TypeScript，但在让任何东西正常工作时遇到了一些问题。

import React from "react";
import * as ReactDOM from "react-dom";
import Application from "./Application";

console.log(React); // undefined

ReactDOM.render(
    <Application/>, window.document.getElementById("application-wrapper")
);

控制台在以下位置抛出错误 <Application />

当我像这样导入反应时，反应加载：

import * as React from "react";

但是，我想使用默认导出的 import 语句，因为我在所有现有组件中使用此导入语法导入 React：

import React, {Component} from "react";

export default class Whatever extends Component<Props, State> {
...
}

我的tsconfig.json文件包含允许合成默认值的这一行：

"allowSyntheticDefaultImports": true

我的webpack.config.js文件：

let path = require("path");
let config = {
    entry: "./src/main.tsx",
    output: {
        path: path.resolve(__dirname, "build"),
        filename: "bundle.js"
    },
    devtool: "source-map",
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".jsx"]
    },
    module: {
        loaders: [
            {
            test: /\.tsx?$/,
            loader: "ts-loader",
            exclude: /node_modules/
            }
        ]       
    }
};

module.exports = config;

不知道我在这里错过了什么......

Answer 1

"esModuleInterop": true改为设置。

Answer 2

在您的打字稿配置中，即 tsconfig.json"esModuleInterop": true和"allowSyntheticDefaultImports": true. 这将允许您导入符合 es6 模块规范的 CommonJS 模块。