meu progrma tá dando esse erro de import

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> ); }

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 ✓.