title: Getting error You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports
body: <p>Could you please to help me to solve this issue, I am trying to render chart using chartjs in reactjs.
  Here are my Codes:</p>
  <p>file chart.component.js</p>
  <pre><code>import React, { Component } from 'react';
  import { Pie } from 'react-chartjs-2';
  
  export default class Chart extends Component {
    
    constructor(props) {
      super(props);
      this.state = {
        chartData: props.chartData
      }
      console.log(JSON.stringify(this.state.chartData))
    }
  
    static defaultProps = {
      displayTitle: true,
      displayLegend: true,
      legendPosition: 'right',
      location: 'City'
    }
  
    render() {
  
      return (
  
        &lt;div className=&quot;chart&quot;&gt;
          &lt;Pie
            data={this.state.chartData}
            options={{
              title:{
                display:this.props.displayTitle,
                text:'Largest Cities In '+this.props.location,
                fontSize:25
              },
              legend:{
                display:this.props.displayLegend,
                position:this.props.legendPosition
              }
            }}
          /&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  <p>home.component.js</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import { Redirect } from &quot;react-router-dom&quot;;
  import AuthService from &quot;../services/auth.service&quot;;
  import Chart from './chart.component';
  
  export default class Home extends Component {
  
    constructor(props) {
      super(props);
      this.state = {
        chartData: {}
      }
    }
  
    componentWillMount() {
      // this.getchartData(); // this should be this.getChartData();
      this.getChartData();
      
    }
  
    getChartData() {
      // Ajax calls here
      this.setState({
        chartData: {
          labels: ['Boston', 'Worcester', 'Springfield', 'Lowell', 'Cambridge', 'New Bedford'],
          datasets: [
            {
              label: 'Population',
              data: [
                617594,
                181045,
                153060,
                106519,
                105162,
                95072
              ],
              backgroundColor: [
                'rgba(255, 99, 132, 0.6)',
                'rgba(54, 162, 235, 0.6)',
                'rgba(255, 206, 86, 0.6)',
                'rgba(75, 192, 192, 0.6)',
                'rgba(153, 102, 255, 0.6)',
                'rgba(255, 159, 64, 0.6)',
                'rgba(255, 99, 132, 0.6)'
              ]
            }
          ]
        }
      });
  
      
    }
  
    render() {
      return (
        &lt;div className=&quot;container&quot;&gt;
          &lt;Chart chartData={this.state.chartData} location=&quot;Massachusetts&quot; legendPosition=&quot;bottom&quot; /&gt;
        &lt;/div&gt;
      );
    }
    
  }
  </code></pre>
  <p>And Home component is used in App.js</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import { Switch, Route, Link } from &quot;react-router-dom&quot;;
  import &quot;bootstrap/dist/css/bootstrap.min.css&quot;;
  import &quot;./App.css&quot;;
  
  import AuthService from &quot;./services/auth.service&quot;;
  
  import Login from &quot;./components/login.component&quot;;
  import Register from &quot;./components/register.component&quot;;
  import Home from &quot;./components/home.component&quot;;
  
  class App extends Component {
    constructor(props) {
      super(props);
      this.logOut = this.logOut.bind(this);
  
      this.state = {
        currentUser: undefined,
      };
    }
  
    componentDidMount() {
      const user = AuthService.getCurrentUser();
  
      if (user) {
        this.setState({
          currentUser: user,
        });
      }
    }
  
    logOut() {
      AuthService.logout();
    }
  
    render() {
      const { currentUser} = this.state;
  
      return (
        &lt;div&gt;
          &lt;nav className=&quot;navbar navbar-expand navbar-dark bg-dark&quot;&gt;
            &lt;div className=&quot;navbar-nav mr-auto&quot;&gt;
            &lt;/div&gt;
            {currentUser ? (
              &lt;div className=&quot;navbar-nav ml-auto&quot;&gt;
                &lt;li className=&quot;nav-item&quot;&gt;
                  &lt;Link to={&quot;/profile&quot;} className=&quot;nav-link&quot;&gt;
                    Welcome, {currentUser.username}
                  &lt;/Link&gt;
                &lt;/li&gt;
                &lt;li className=&quot;nav-item&quot;&gt;
                  &lt;a href=&quot;/login&quot; className=&quot;nav-link&quot; onClick={this.logOut}&gt;
                    LogOut
                  &lt;/a&gt;
                &lt;/li&gt;
              &lt;/div&gt;
            ) : (
                &lt;div className=&quot;navbar-nav ml-auto&quot;&gt;
                  &lt;li className=&quot;nav-item&quot;&gt;
                    &lt;Link to={&quot;/login&quot;} className=&quot;nav-link&quot;&gt;
                      Login
                  &lt;/Link&gt;
                  &lt;/li&gt;
  
                  &lt;li className=&quot;nav-item&quot;&gt;
                    &lt;Link to={&quot;/register&quot;} className=&quot;nav-link&quot;&gt;
                      Sign Up
                  &lt;/Link&gt;
                  &lt;/li&gt;
                &lt;/div&gt;
              )}
          &lt;/nav&gt;
  
          &lt;div className=&quot;container mt-3&quot;&gt;
            &lt;Switch&gt;
              &lt;Route exact path={[&quot;/&quot;, &quot;/login&quot;]} component={Login} /&gt;
              &lt;Route exact path=&quot;/register&quot; component={Register} /&gt;
              &lt;Route exact path=&quot;/home&quot; component={Home} /&gt;
            &lt;/Switch&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  <p>After login, it should redirect to home page.</p>
  <p>My login code:</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import Form from &quot;react-validation/build/form&quot;;
  import Input from &quot;react-validation/build/input&quot;;
  import CheckButton from &quot;react-validation/build/button&quot;;
  
  import AuthService from &quot;../services/auth.service&quot;;
  
  const required = value =&gt; {
    if (!value) {
      return (
        &lt;div className=&quot;alert alert-danger&quot; role=&quot;alert&quot;&gt;
          This field is required!
        &lt;/div&gt;
      );
    }
  };
  
  export default class Login extends Component {
    constructor(props) {
      super(props);
      this.handleLogin = this.handleLogin.bind(this);
      this.onChangeUsername = this.onChangeUsername.bind(this);
      this.onChangePassword = this.onChangePassword.bind(this);
  
      this.state = {
        username: &quot;&quot;,
        password: &quot;&quot;,
        loading: false,
        message: &quot;&quot;
      };
    }
  
    onChangeUsername(e) {
      this.setState({
        username: e.target.value
      });
    }
  
    onChangePassword(e) {
      this.setState({
        password: e.target.value
      });
    }
  
    handleLogin(e) {
      e.preventDefault();
  
      this.setState({
        message: &quot;&quot;,
        loading: true
      });
  
      this.form.validateAll();
  
      if (this.checkBtn.context._errors.length === 0) {
        AuthService.login(this.state.username, this.state.password).then(
          () =&gt; {
            this.props.history.push(&quot;/home&quot;);
            window.location.reload();
          },
          error =&gt; {
            const resMessage =
              (error.response &amp;&amp;
                error.response.data &amp;&amp;
                error.response.data.message) ||
              error.message ||
              error.toString();
  
            this.setState({
              loading: false,
              message: resMessage
            });
          }
        );
      } else {
        this.setState({
          loading: false
        });
      }
    }
  
    render() {
      return (
        &lt;div className=&quot;col-md-12&quot;&gt;
          &lt;div className=&quot;card card-container&quot;&gt;
            &lt;img
              src=&quot;//ssl.gstatic.com/accounts/ui/avatar_2x.png&quot;
              alt=&quot;profile-img&quot;
              className=&quot;profile-img-card&quot;
            /&gt;
  
            &lt;Form
              onSubmit={this.handleLogin}
              ref={c =&gt; {
                this.form = c;
              }}
            &gt;
              &lt;div className=&quot;form-group&quot;&gt;
                &lt;label htmlFor=&quot;username&quot;&gt;Username&lt;/label&gt;
                &lt;Input
                  type=&quot;text&quot;
                  className=&quot;form-control&quot;
                  name=&quot;username&quot;
                  value={this.state.username}
                  onChange={this.onChangeUsername}
                  validations={[required]}
                /&gt;
              &lt;/div&gt;
  
              &lt;div className=&quot;form-group&quot;&gt;
                &lt;label htmlFor=&quot;password&quot;&gt;Password&lt;/label&gt;
                &lt;Input
                  type=&quot;password&quot;
                  className=&quot;form-control&quot;
                  name=&quot;password&quot;
                  value={this.state.password}
                  onChange={this.onChangePassword}
                  validations={[required]}
                /&gt;
              &lt;/div&gt;
  
              &lt;div className=&quot;form-group&quot;&gt;
                &lt;button
                  className=&quot;btn btn-primary btn-block&quot;
                  disabled={this.state.loading}
                &gt;
                  {this.state.loading &amp;&amp; (
                    &lt;span className=&quot;spinner-border spinner-border-sm&quot;&gt;&lt;/span&gt;
                  )}
                  &lt;span&gt;Login&lt;/span&gt;
                &lt;/button&gt;
              &lt;/div&gt;
  
              {this.state.message &amp;&amp; (
                &lt;div className=&quot;form-group&quot;&gt;
                  &lt;div className=&quot;alert alert-danger&quot; role=&quot;alert&quot;&gt;
                    {this.state.message}
                  &lt;/div&gt;
                &lt;/div&gt;
              )}
              &lt;CheckButton
                style={{ display: &quot;none&quot; }}
                ref={c =&gt; {
                  this.checkBtn = c;
                }}
              /&gt;
            &lt;/Form&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  <p>And I got error:
  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.</p>
  <p>Regards with many thanks.</p>