I am trying to use a section-team template but got an error

  1. MDB Home Page
  2. Support Main Page
  3. MDB React
Topic: I am trying to use a section-team template but got an error (react version)

rmedrano23 pro asked 7 years ago

I got this error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Cutting lines of code I was able to isolate the line that is producing the error to the following: <Avatar tag="img"src="https://mdbootstrap.com/img/Photos/Avatars/img%20(32).jpg"className="rounded-circle z-depth-1 img-fluid"alt="Sample avatar"https://mdbcdn.b-cdn.net/> I guess something is wrong with Avatar component. Could you please advice? Thanks. Rodolfo. pd. Not sure about the version ... How do I find out?

Jakub Strebeyko staff answered 7 years ago

Hi Rodolfo,

Thanks for reaching out! The error message is rather common and ambiguous. It most cases it seems to be regarding the import statement on the top of the file in question. To solve it, we need some more info though, like - how exactly do you use team section "template" (which is, in fact, more of a presentation of a section than a template per se). Is the Avatar component imported differently than the rest? Is the component mentioned in the src/index.js file? To learn about version, please refer to mdbreact package.json file.

With Best Regards,
Kuba

rmedrano23 pro commented 7 years ago

Thanks for your response. Apologies for the delay answering back ... a few days without internet :-( ... ------------------------------------------------ The import statement is this one import { Container, Row, Col, Card, CardBody, Avatar, Mask, Fa, View, Button} from 'mdbreact'; The component code was copy&pasted from the sections-team of the mdboostrap site. See below pls. ------------------------------------------------ My package.json is { "name": "template", "version": "0.1.0", "private": true, "dependencies": { "firebase-cli": "^1.2.0", "firebase-tools": "^3.18.6", "mdbreact": "git+https://oauth2:jFzMYzqSBUmGm3Z1ZA9s@git.mdbootstrap.com/mdb/react/re-pro.git", "react": "^16.4.0", "react-dom": "^16.4.0", "react-scripts": "1.1.4", "react-toastify": "^4.1.0" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } } ------------------------------------------------ The 'offending part' is this one The component code was copy&pasted from the sections-team of the mdboostrap site. The 'offending part' is this one import React, { Component } from 'react'; import { Container, Row, Col, Card, CardBody, Avatar, Mask, Fa, View, Button} from 'mdbreact'; class QuienesSomos extends Component { render () { return ( Our amazing team Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam. Anna Williams Graphic designer Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci sed quia non numquam modi tempora eius. ) } } export default QuienesSomos; --------------------------- Thanks again. Rodolfo.
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
rmedrano23
Pro User
17Support score
7Questions 0Answers
0Snippets likes 0Snippets