Entrar Ainda não tem acesso?
1
resposta

Erro ao transformar o componente App em um styled component

Referente ao curso React: abstraindo seu CSS com Styled Components, no capítulo Styled Components e atividade Apresentação

por Emilly Ramos Teixeira
| 80.7k xp | 22 posts
import React from 'react';
import styled from 'styled-components';
import './App.css';
import { Header } from '../src/Components/Header';
import { GlobalStyle } from '../src/Components/GlobalStyle';
import { Menu } from '../src/Components/Header/Menu';

const AppContainer = styled.div`
    display: grid;
`;

function App() {
   return (
            <AppContainer className="App">
                    <GlobalStyle/>
                    <Header/>
                    <Menu/>
            </AppContainer>
  );
}

export default App;

Eu recebo o seguinte erro ao fazer essa conversão:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of App.

1 resposta
por Luiz Fernando Ribeiro
| 119.4k xp | 128 posts
Instrutor Desenvolvedor Front-End

Olá Emilly, tudo bem?

Sem ver o seu código fica um pouco complicado de saber exatamente onde está a raiz do problema.

O problema pode ser:

  1. O import do seu componente pode estar errado, confira se por exemplo o export do Menu é de ../src/Components/Header/Menu ou de ../src/Components/Menu, sem o Header.

  2. Um dos componentes que você está utilizando (o <Menu> ou o Header) não está sendo exportado do seu arquivo ou está sendo exportado como default e você está importando com chaves, export default deve ser feito sem chaves como por exemplo:

O export dentro de src/Components/Header/Menu:

export default Menu;

O import dentro do App

import Menu  from '../src/Components/Header/Menu';

Caso essas soluções não se apliquem a você, me envie o link do seu Github para que eu consiga debugar o problema.

Espero que uma destas soluções tenha resolvido seu problema!

Bons estudos!