javascript - React 和 ReactDOM 未定义但已安装

Question

我只是想用 .tsx 转换器制作一个简单的 React 应用程序，但是 react 和 react-dom 在导入时是未定义的:

这是我的入口文件，也是唯一的 typescript 文件:

索引.tsx

import React from 'react';
import ReactDOM from 'react-dom';

console.log(ReactDOM);

ReactDOM.render(<div>SUCCESS!</div>, document.getElementById('root'));

控制台输出错误:

undefined
Uncaught TypeError: Cannot read property 'render' of undefined

ReactDOM 对象输出为“未定义”，因此 render() 在 undefined object 上失败。使用“npm install --save-dev react react-dom”以正常方式安装 React 和 ReactDOM 模块，并验证这两个 react 文件夹都存在于 node_modules 下。

webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './src/js/index.tsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/dist'
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx']
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  plugins: [

  ]
};

包.json

{
  "name": "helloworld",
  "version": "1.0.0",
  "description": "Hello there",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack-dev-server",
    "build:prod": "webpack -p"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "awesome-typescript-loader": "^3.2.3",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.7",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "style-loader": "^0.19.0",
    "ts-loader": "^2.3.7",
    "typescript": "^2.5.3",
    "webpack": "^3.7.1",
    "webpack-dev-server": "^2.9.1"
  }
}

Answer 1

将 TypeScript 中模块的所有导出导入到单个名称的正确语法是:

import * as React from 'react';
import * as ReactDOM from 'react-dom';

(注意 * as 部分)

您使用的语法将改为导入 default 导出，React 不提供 AFAIK。 (因此未定义。)

情况有点困惑，因为如果没有 default 导出，IIRC babel 会将整个 module.exports 对象暴露为 default 导出提供，但 TypeScript 不会。

PS:还要确保通过 npm 安装 @types/react 和 @types/react-dom 作为依赖项，以便获得完整的自动完成和类型检查。

---

编辑 (2018-04-04): 从 TypeScript 2.7 开始，上述答案不再完全准确。

新的 --esModuleInterop 编译器选项提供了与 Babel 和 ES6 模块规范更紧密一致的导入语义。

启用选项后，CommonJS module.exports 将被 TypeScript 编译器映射到 ES6 default export ...，因此 import foo from 'bar' 现在应该可以正常工作，就像在 Babel 上一样。

请记住，--esModuleInterop 目前默认处于禁用状态以实现更平滑的过渡，但 TypeScript 文档建议为新项目和现有项目启用它。

(您可以通过命令行或通过 tsconfig.json 文件启用它)

注意:import * as foo from 'bar' 语法仍然有效，但它现在仅用于您希望将所有非默认导出分组在单个标识符下的情况。 (不常见)

有关更改及其解决的问题的更多信息，请参阅 Relevant section of the Release Notes for TypeScript 2.7