首页 文章

React和ReactDOM未定义但已安装

提问于
浏览 次
0

我只是想用.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"
  }
}
javascript reactjs

1 回答

  • 2

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

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

    （注意 * as 部分）

    您正在使用的语法将导入 default 导出，而React不提供AFAIK . （因此 undefined . ）

    这种情况有点令人困惑，因为如果没有提供 default 导出，IIRC babel会将整个 module.exports 对象公开为 default 导出，但TypeScript不会 .

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

    编辑（2018-04-04）： As of TypeScript 2.7, the answer above is no longer entirely accurate.

    新的 --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

    回复于

相关问题