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

Topic: I am trying to use a section-team template but got an error (react version)

rmedrano23 pro asked 6 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"/> 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?

Add comment

Jakub Strebeyko staff answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

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 6 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.

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.

<a rel="nofollow">
                
              </a>
              <a rel="nofollow">
                
              </a>
              <a rel="nofollow">
                
              </a>
            
          
        
      
    
    )
  }
}

export default QuienesSomos;
---------------------------
Thanks again. Rodolfo.

Please insert min. 15 characters.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB React
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

rmedrano23

Pro User 17Support score
7Questions 0Answers 0Snippets