时间戳

首页 > 解决方案 > React Ant design Uncaught TypeError：无法读取未定义的属性“组件”

javascript - React Ant design Uncaught TypeError：无法读取未定义的属性“组件”

问题描述

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

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';但没有奏效。

标签： javascriptreactjsantd

解决方案

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

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

此链接在 create-react-app 中使用也说相同

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

结论，当添加和标记反应应用程序的 index.html 时会发生此错误

推荐阅读