React.js problem

Asked

Viewed 582 times

4

I am making an application in React.js and gave this problem:

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.

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

import React, { Component } from "react";
import { Link } from "react-router-dom";

import Logo from "../../imagens/logo.png";

import { Form, Container } from "./styles";

class SignUp extends Component {
  state = {
    username: "",
    email: "",
    password: "",
    error: ""
  };

  handleSignUp = e => {
    e.preventDefault();
    alert("Eu vou te registrar");
  };

  render() {
    return (
      <Container>
        <Form onSubmit={this.handleSignUp}>
          <img src={Logo} alt="Airbnb logo" />
          {this.state.error && <p>{this.state.error}</p>}
          <input
            type="text"
            placeholder="Nome de usuário"
            onChange={e => this.setState({ username: e.target.value })}
          />
          <input
            type="email"
            placeholder="Endereço de e-mail"
            onChange={e => this.setState({ email: e.target.value })}
          />
          <input
            type="password"
            placeholder="Senha"
            onChange={e => this.setState({ password: e.target.value })}
          />
          <button type="submit">Cadastrar grátis</button>
          <hr />
          <Link to="/">Fazer login</Link>
        </Form>
      </Container>
    );
  }
}

export default SignUp;

import React from "react";
import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";
import SignUp from "../components/SignUp";
import { isAuthenticated } from "./auth";

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      isAuthenticated() ? (
        <Component {...props} />
      ) : (
        <Redirect to={{ pathname: "/", state: { from: props.location } }} />
      )
    }
  />
);

const Routes = () => (
  <BrowserRouter>
    <Switch>
      <Route exact path="/" component={() => <h1>Login</h1>} />
      <Route path="/signup" component={SignUp} />
      <PrivateRoute path="/app" component={() => <h1>App</h1>} />
      <Route path="*" component={() => <h1>Page not found</h1>} />
    </Switch>
  </BrowserRouter>
);

export default Routes;
react

  • by error message it informs that the problem is in the method SignUp, you could post this method?

  • @William Postei

  • I can’t see the image (locked here). Add as text the code: of the class you want to import, from what Willam told Signup; the code of the class that imports the first.

  • And how Signup is imported where it is being used?

  • @Mari is being imported in the Routes.js

  • But it’s important how. Put index.js (or at least the start where the Imports are).

  • @But I put!

  • @Thales-Vinicius import your componentSignUp with the keys "{}", for example { SignUp }

  • Sorry! Nothing wrong with Signup import. When you give this message "You likely forgot to export your Component..." what usually happens is that you have not exported it as default and try to import as if it were default (i.e. without the keys). In short: if you export with 'export default Signup' you import without keys 'import Signup from './signup'; if you export 'export Signup', you import with keys 'import { Signup } from './signup'.

  • I saw the image on the phone, he says to watch the Signup render(), then the Signup he is importing ok. Check if: Form or Container are not exported with 'export default'. Import image I do not know.

  • @William didn’t turn out well

  • @But the form is imported right, already the container I do not understand what you are talking about hehe

  • In the Styles file you will get the declaration of Form and Container. If for example it looks like this: 'export default Form;' and 'export Container' (of course, it can only have 1 default), you would need to import it like this in Signup: import Form, {Container} from './Styles';

  • If both are just like export form and export container then import is ok. In that case I would try to take the image and import of it to test.

  • @Mari was import error in Styles! Thank you!!

  • Good! Then I’ll put as an answer and you accept =)

Show 11 more comments

1 answer

4


The message below indicates that you are importing as default a class that has not exported as default, or otherwise imported as default and exported as default:

You likely forgot to export your Component from the file it’s defined in, or you Might have Mixed up default and named Imports.

If you export two components, one default and the other not:

export default Form;
export Container;

You must import the default without keys and the other with:

import Form, { Container } from './styles';

The error also says to check the Signup render, so it is one of the Imports in that file that is causing the error.

Browser other questions tagged react

You are not signed in. Login or sign up in order to post.