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

Viewed 2846

My app runs successfully but I am getting this error on browser console after using a few components of ant design. When I installed the ant d I done these steps

  • npm install antd
  • added link tag of antd.compact.min.css to index.html
  • added script tag of /antd/4.13.1/antd.min.js to index.html
  • added script tag of /antd/4.13.1/antd-with-locales.min.js to 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

Here is my 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"
    ]
  }
}

I tried import React {Component} from "react"; and import * as React from 'react'; but not worked.

1 Answers

I found the solution for my problem. Firstly, if you are familiar with HTML CSS and JS structure and using UI libraries(antd ,bootstrap ,semantic UI) like I used to be, this problem could meet you to when you passed to frameworks like Reactjs.

Point is, no need to add CDN links <link> and <script> to your index.html file (if documentation does not says to add). These steps are enough,(example for ant design UI library)

also this link Use in create-react-app says same

  • npm install antd
  • @import '~antd/dist/antd.css'; to App.css
  • and add import { Button } from 'antd'; to top of your component when using a ant design component such as button

Conclusion, this error occurs when add and tags to react app's index.html

Related