Question

ReactDOM：未捕获的类型错误：无法读取未定义的属性“render”

2020-08-20

5287

reactjs typescript

我似乎遇到了一个比较常见的问题，但其他解决方案似乎都不适合我，所以我想发布一些代码看看大家怎么说。我的 React 网页因 ReactDOM 未初始化而停止工作。我不明白为什么。

错误

Uncaught TypeError: Cannot read property 'render' of undefined

index.tsx

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

ReactDOM.render(<div>Hello World</div>, document.getElementById('app'))  // <--- ERROR LINE

index.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Mine Phaser</title>
</head>

<body style="font-family:Arial, Helvetica, sans-serif; color: aliceblue; background-color:#0e1114;text-align: center; ">
  <div id="app"></div>
  <script src="bundle.js"></script>
</body>

</html>

package.json

{
  "name": "***",
  "version": "0.0.1",
  "description": "***",
  "private": true,
  "main": "src/index.ts",
  "author": "***",
  "license": "MIT",
  "dependencies": {
    "@reduxjs/toolkit": "^1.4.0",
    "@types/react": "^16.9.46",
    "@types/react-dom": "^16.9.8",
    "antd": "^4.5.4",
    "phaser": "^3.23.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server --open"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^3.0.2",
    "@typescript-eslint/parser": "^3.0.2",
    "css-loader": "^4.2.1",
    "eslint": "^7.1.0",
    "eslint-config-airbnb": "^18.1.0",
    "eslint-config-google": "^0.14.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-react": "^7.20.0",
    "style-loader": "^1.2.1",
    "ts-loader": "^8.0.2",
    "typescript": "^3.9.7",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  }
}

tsconfig.json

{
    "compilerOptions": {
        "lib": [
            "dom",
            "dom.iterable",
            "esnext"
        ],
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "skipLibCheck": true,
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "esnext",
        "target": "es5",
        "jsx": "react",
        "allowJs": true,
        "moduleResolution": "node",
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true
    },
    "files": [
        "./node_modules/phaser/types/phaser.d.ts"
    ],
    "include": [
        "src"
    ]
}

webpack.config.js

/* eslint-disable */
const path = require('path')

module.exports = {
  devtool: 'inline-source-map',
  externals: {
      'react': {
          commonjs: 'react',
          commonjs2: 'react',
          amd: 'React',
          root: 'React'
      },
      'react-dom': {
          commonjs: 'react-dom',
          commonjs2: 'react-dom',
          amd: 'ReactDOM',
          root: 'ReactDOM'
      }
  },
  mode: 'development',
  entry: './src/index.tsx',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      }
    ],
  },
  devServer: {
    contentBase: './dist',
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
    alias: {
      'react': 'react',
      'react-dom': 'react-dom',
    },
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
}

Answer 1

问题是您将 react 和 react-dom 设置为外部，这意味着它们不会包含在您的包中。因此，您必须删除该配置，或者必须将它们作为脚本加载到 html 模板中：

删除这些

externals: {
  'react': {
      commonjs: 'react',
      commonjs2: 'react',
      amd: 'React',
      root: 'React'
  },
  'react-dom': {
      commonjs: 'react-dom',
      commonjs2: 'react-dom',
      amd: 'ReactDOM',
      root: 'ReactDOM'
  }
}

或者添加 index.html ：

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

请记住，如果您想保留 externals 设置，只需在 output 选项中设置更多 libraryTarget: umd 以确保它加载您的全局对象。

output: {
  // ...
  libraryTarget: 'umd',
},