title: How should I solve "Attempted import error: 'Component' is not exported from './Component'."
body: <p>I tried to import ResponseForm
  but
  the error</p>
  <blockquote>
  <p>Failed to compile. ./src/components/projects/ProjectDetails.js
  Attempted import error: 'ResponseForm' is not exported from './ResponseForm'.</p>
  </blockquote>
  <p>happens.</p>
  <p>ResponseForm component actually exists.
  The path seems to be correct.
  How should I fix it?
  Why is import error occuring?</p>
  <pre><code>
  import  {Component}  from 'react'
  import  {connect} from 'react-redux'
  import  {createProject} from '../../store/actions/projectActions'
  import { Redirect } from 'react-router-dom'
  
  const ResponseForm = () =&gt; {
      state = {
          content: ''
      }
  
      handleChange = (e) =&gt; {
          this.setState({
              [e.target.id]: e.target.value
          })
      }
      handleSubmit = (e) =&gt; {
          e.preventDefault()
          this.props.createProject(this.state)
      }
  
      return (
          &lt;div className=&quot;container&quot;&gt;
          &lt;form onSubmit={handleSubmit} className=&quot;white&quot;&gt;
              &lt;h5 className=&quot;grey-text text-darken-3&quot;&gt;KAITO&lt;/h5&gt;
              &lt;div className=&quot;input-field&quot;&gt;
                  &lt;button className=&quot;btn pink lighten-1 z-depth-0&quot;&gt;TEST&lt;/button&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
      )
  }
  
  export default ResponseForm;
  </code></pre>
  <pre><code>import { connect } from &quot;react-redux&quot;;
  import { firestoreConnect,useFirestoreConnect } from &quot;react-redux-firebase&quot;;
  import { compose } from &quot;redux&quot;;
  import { ResponseForm } from &quot;./ResponseForm&quot;;
  
  const ProjectDetails = (props) =&gt; {
    const { project } = props;
  
    if (project) {
      return (
        &lt;div className=&quot;container section project-details&quot;&gt;
          &lt;div className=&quot;card z-depth-0&quot;&gt;
            &lt;div className=&quot;card-content&quot;&gt;
              &lt;span className=&quot;card-title&quot;&gt;{project.title}&lt;/span&gt;
              &lt;p&gt;{project.content}&lt;/p&gt;
            &lt;/div&gt;
            &lt;ResponseForm /&gt;
            &lt;div className=&quot;project-list section&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    } else {
      return (
        &lt;div className=&quot;container center&quot;&gt;
          &lt;p&gt;Loaging project...&lt;/p&gt;
        &lt;/div&gt;
      );
    }
  };
  </code></pre>