4

Estou fazendo uma aplicação em React.js e deu este problema:

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;
16
  • pela mensagem de erro ele informa que o problema está no método SignUp, você poderia postar esse método?
    – William
    21/05/2019 às 19:15
  • @William Postei 21/05/2019 às 19:18
  • Não consigo ver a imagem (imgur bloqueado aqui). Adicione como texto o código: da classe que se quer importar, pelo que o Willam disse a SignUp; o código da classe que importa a primeira.
    – mari
    21/05/2019 às 19:19
  • E como SignUp é importado onde está sendo usado?
    – mari
    21/05/2019 às 19:26
  • @mari está sendo importado no routes.js 21/05/2019 às 19:27

1 Resposta 1

4

A mensagem abaixo indica que você está importando como default uma classe que não exportou como default, ou contrário, importou como não default e exportou como 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.

Se você exporta dois componentes, um default e o outro não:

export default Form;
export Container;

Deve importar o default sem chaves e o outro com:

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

O erro também diz para checar o render do SignUp, portanto é algum dos imports nesse arquivo que está causando o erro.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .