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

admin管理员组

文章数量:1291085

I tried to import ResponseForm but the error

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

happens.

ResponseForm ponent 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 { pose } 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>
    );
  }
};

I tried to import ResponseForm but the error

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

happens.

ResponseForm ponent 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 { pose } 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>
    );
  }
};

• javascript
• reactjs

Share Improve this question Follow edited Mar 8, 2021 at 8:52 Hkachhia 4,53977 gold badges4444 silver badges7878 bronze badges asked Mar 8, 2021 at 8:50 user14232549user14232549 41377 silver badges1919 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

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.

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

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";

本文标签：