How should I solve "Attempted import error: 'Component' is not exported from './Component'."

user_14232549 0
Viewed 6056

I tried to import ResponseForm but the error

Failed to compile. ./src/components/projects/ProjectDetails.js Attempted import error: 'ResponseForm' is not exported from './ResponseForm'.

happens.

ResponseForm component actually exists. The path seems to be correct. How should I fix it? Why is import error occuring?


import  {Component}  from 'react'
import  {connect} from 'react-redux'
import  {createProject} from '../../store/actions/projectActions'
import { Redirect } from 'react-router-dom'

const ResponseForm = () => {
    state = {
        content: ''
    }

    handleChange = (e) => {
        this.setState({
            [e.target.id]: e.target.value
        })
    }
    handleSubmit = (e) => {
        e.preventDefault()
        this.props.createProject(this.state)
    }

    return (
        <div className="container">
        <form onSubmit={handleSubmit} className="white">
            <h5 className="grey-text text-darken-3">KAITO</h5>
            <div className="input-field">
                <button className="btn pink lighten-1 z-depth-0">TEST</button>
            </div>
        </form>
    </div>
    )
}

export default ResponseForm;

import { connect } from "react-redux";
import { firestoreConnect,useFirestoreConnect } from "react-redux-firebase";
import { compose } from "redux";
import { ResponseForm } from "./ResponseForm";

const ProjectDetails = (props) => {
  const { project } = props;

  if (project) {
    return (
      <div className="container section project-details">
        <div className="card z-depth-0">
          <div className="card-content">
            <span className="card-title">{project.title}</span>
            <p>{project.content}</p>
          </div>
          <ResponseForm />
          <div className="project-list section"></div>
        </div>
      </div>
    );
  } else {
    return (
      <div className="container center">
        <p>Loaging project...</p>
      </div>
    );
  }
};
reactjs javascript
3 Answers

Because you're using export default, your import statement should look like this:

import ResponseForm from "./ResponseForm";

(no curly braces)

Alternatively, you could change your first file to this:

export const ResponseForm = () => {

and remove the export default line at the end. Then, you could keep your current import syntax.

user_5609420

This is because you are exporting ResponseFrom as default and try to import using {}

which need to like this

import ResponseForm from "./ResponseForm";

instead of

import { ResponseForm } from "./ResponseForm";

in ProjectDetails

user_138419050

Answer

Response form is the default export:

export default ResponseForm;

You should import it like this:

import ResponseForm from "./ResponseForm";

Using non default exports

If you want to avoid making it the default export you can do this:

import  {Component}  from 'react'
import  {connect} from 'react-redux'
import  {createProject} from '../../store/actions/projectActions'
import { Redirect } from 'react-router-dom'

export const ResponseForm = () => {
    state = {
        content: ''
    }

    handleChange = (e) => {
        this.setState({
            [e.target.id]: e.target.value
        })
    }
    handleSubmit = (e) => {
        e.preventDefault()
        this.props.createProject(this.state)
    }

    return (
        <div className="container">
        <form onSubmit={handleSubmit} className="white">
            <h5 className="grey-text text-darken-3">KAITO</h5>
            <div className="input-field">
                <button className="btn pink lighten-1 z-depth-0">TEST</button>
            </div>
        </form>
    </div>
    )
}

And import it as above:

import { ResponseForm } from "./ResponseForm";

user_153132180
Related