Question

我只是想用.tsx转换器制作一个简单的反应应用程序，但是在导入时反应和反应都是未定义的：

这是我的输入文件，只有打字稿文件：

index.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对象输出为'undefined'，因此render（）在未定义的对象上失败。使用'npm install --save-dev react react-dom'以正常方式安装React和ReactDOM模块，并验证了在node_modules下是否存在react文件夹。

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: [

  ]
};

的package.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。（因此undefined。）

情况有点令人困惑，因为如果没有提供module.exports导出，IIRC babel会将整个default对象公开为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

Answer 2

遇到同样的问题。就我而言，这是因为升级只反应而没有反应 dom。

<块引用>

例如 - React: 17.x 和 React-DOM: 16.x

尝试以下有助于解决此问题的命令。

npm update react react-dom --depth 4

React和ReactDOM未定义但已安装

2 个答案: