Entrar Ainda não tem acesso?
1
resposta

meu progrma tá dando esse erro de import

Referente ao curso Next.js: explorando o framework, no capítulo Estilizando o projeto e atividade Como lidar com estilos globais

por Nivaldo Pereira da Silva Júnior
| 11.2k xp | 2 posts

Unhandled Runtime Error Error: 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.

Check the render method of Title.

import Link from "../src/components/Link"
import React from "react";

function Title({children, as}){
    const Tag = as;
    return (
        <React.Fragment>
            <Tag style={styles.title}>
                {children}
            </Tag>
        </React.Fragment>
    );
}

const styles = {
    title: {
        color:'blue',
        fontFamily: "sans-sarif",
    }
}



export default function HomePage(){
    return (
        <div>
            <Title> Alura Cases - Home</Title>
            <Link href="/faq">
                Ir para página do FAQ
            </Link>
            
        </div>

    );  
}
1 resposta
por MARIA ISABEL TEIXEIRA
| 1045.8k xp | 2507 posts
Alura Scuba Team Monitora | Suporte Educacional | AWS & Azure Certified

Oii, Nivaldo. Como vai?

O problema parece ser do Title que você tentou renderizar na sua HomePage. O erro sugere que o tipo do elemento é inválido, acontece quando o componente não é exportado da forma certa ou quando há confusão entre importações nomeadas e padrão.

Você usou, no seu código, a tag Title sem passar a propriedade as, que é usada para definir qual tag HTML será renderizada. Se as não for fornecida, a Tag será considerada indefinida.

Uma solução seria garantir que você sempre passe uma propriedade as ao usar o componente Title. Por exemplo:

export default function HomePage(){
    return (
        <div>
            <Title as="h1">Alura Cases - Home</Title>
            <Link href="/faq">
                Ir para página do FAQ
            </Link>
        </div>
    );  
}

Além disso, para evitar futuros erros, você pode adicionar uma verificação dentro do componente Title para garantir que Tag não seja considerada undefined (indefinida). Por exemplo:

function Title({children, as}){
    const Tag = as || 'div'; // Fallback para 'div' se 'as' não for fornecido
    return (
        <React.Fragment>
            <Tag style={styles.title}>
                {children}
            </Tag>
        </React.Fragment>
    );
}

Se outra dúvida surgir, estamos disponíveis aqui.

Abraços e bons estudos! ^_^

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.