React Ant design Uncaught TypeError: Cannot read property 'Component' of undefined

Question

我的应用程序运行成功，但在使用 ant design 的几个组件后，我在浏览器控制台上收到此错误。当我安装 ant d 时，我完成了这些步骤

npm 安装 antd
将 antd.compact.min.css 的 link 标签添加到 index.html
将 /antd/4.13.1/antd.min.js 的脚本标签添加到 index.html
将/antd/4.13.1/antd-with-locales.min.js的脚本标签添加到index.html

Uncaught TypeError: Cannot read property 'Component' of undefined
    at index.js:165
    at Module.a.m.i (index.js:14)
    at a (bootstrap:19)
    at Object.a.m.i (index.js:25)
    at a (bootstrap:19)
    at Object.a.m.i (antd.min.js:23)
    at a (bootstrap:19)
    at bootstrap:83
    at universalModuleDefinition:9
    at universalModuleDefinition:1

这是我的package.json

{
  "name": "example",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@ant-design/icons": "^4.6.2",
    "@material-ui/core": "^4.11.3",
    "@material-ui/styles": "^4.11.3",
    "@react-google-maps/api": "^2.1.1",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "antd": "^4.13.1",
    "axios": "^0.21.1",
    "bootstrap": "^4.6.0",
    "customize-cra": "^1.0.0",
    "jsonwebtoken": "^8.5.1",
    "jwt-decode": "^3.1.2",
    "moment": "^2.29.1",
    "react": "^17.0.1",
    "react-app-rewired": "^2.1.8",
    "react-dom": "^17.0.1",
    "react-file-base64": "^1.0.3",
    "react-google-maps": "^9.4.5",
    "react-hook-google-maps": "0.0.3",
    "react-icons": "^4.2.0",
    "react-moment": "^1.1.1",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.9",
    "redux-thunk": "^2.3.0",
    "styled-components": "^5.2.1",
    "uuid": "^8.3.2",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

我尝试了 import React {Component} from "react"; and import * as React from 'react'; 但没有成功。

Answer 1

我找到了解决问题的方法。首先，如果你像我以前一样熟悉 HTML CSS 和 JS 结构并使用 UI 库（antd，bootstrap，语义 UI），当你转用像 Reactjs 这样的框架时，这个问题可能会遇到你。

要点是，无需将 CDN links <link> and <script> 添加到您的 index.html 文件（如果文档没有说明要添加）。这些步骤就足够了，（ant design UI库的例子）

还有这个linkUse in create-react-app说的一样

npm 安装 antd
@import '~antd/dist/antd.css'; 到 App.css
并在使用 ant design 组件（如按钮）时将 import { Button } from 'antd'; 添加到组件顶部

结论，添加和标记以响应应用程序时会出现此错误index.html

React Ant design Uncaught TypeError: Cannot read property 'Component' of undefined

React Ant design Uncaught TypeError: Cannot read property 'Component' of undefined

javascript

reactjs

antd