2 min de leitura ·

[RESOLVIDO] NEXTJS: Generating static pages TypeError: Cannot read properties of undefined

Estou fazendo um blog simples, e guardei umas imagens do Cloudinary, setei as configs do next, tudo certo... No codeSandBox, tudo funciona certinho, mas quando vou fazer o build me gera esse seguinte erro: Generating static pages (0/25)TypeError: Cannot read properties of undefined(reading 'contact') essa parte do "reading('contact')" eu já testei, e pelo que parece, é uma das coisas que eu retorno em uma função getStatitcProps, e bem provavel que o erro esteja gerando lá... segue o código:

export async function getStaticProps() {
	async function getBlurredImage(imageId: string): Promise<string | undefined> {
		const response = await fetch() // api
		const buffer = await response.arrayBuffer()
		const data = Buffer.from(buffer).toString("base64")
		return `data:image/webp;base64,${data}`
	}

	return {
		props: {
			images: {
				logo: "portfolio/logo_be87dl.png",
				profile: "portfolio/myPhoto_jsruis.png",
				portfolio: {
					jessica_bede: "portfolio/portfolio/jessica_bede_kjkilr.png",
					blurred_jessica_bede: await getBlurredImage(
						"portfolio/portfolio/jessica_bede_kjkilr.png",
					),

					netflix_clone: "portfolio/portfolio/netflix_clone_xkzipt.png",
					blurred_netflix_clone: await getBlurredImage(
						"portfolio/portfolio/netflix_clone_xkzipt.png",
					),

					CRUD: "portfolio/portfolio/CRUD_ynni3g.png",
					blurred_CRUD: await getBlurredImage(
						"portfolio/portfolio/CRUD_ynni3g.png",
					),

					login_azure: "portfolio/portfolio/login_azure_flhiqx.png",
					blurred_login_azure: await getBlurredImage(
						"portfolio/portfolio/login_azure_flhiqx.png",
					),

					site2it: "portfolio/portfolio/site2it_w2wt53.png",
					blurred_site2it: await getBlurredImage(
						"portfolio/portfolio/site2it_w2wt53.png",
					),

					escolinha: "portfolio/portfolio/escolinha_orbnuy.png",
					blurred_escolinha: await getBlurredImage(
						"portfolio/portfolio/escolinha_orbnuy.png",
					),
				},
				contact: {
					whatsapp: "portfolio/contact/wpp_xpneaq.png",
					linkedin: "portfolio/contact/linkedin_i5qx3c.png",
					github: "portfolio/contact/github_yhj9w7.png",
				},
				services: "portfolio/web_ylnmu9.svg",
			},
		},
	}
}

configs do next:

const nextConfig = {
	images: {
		loader: "cloudinary",
		path: cloudinaryBaseUrl,
	}, 
        ...
        }

eu estou pegando essa prop images do getStaticProps e distribuindo de maneira global usando useContext.

export const ContentContext = createContext<ContextData>({} as ContextData)
export default function Index({ images }) {
    return(
        <>
            <ContentContext.Provider value={{ images }}>
                {children}
            </ContentContext.Provider>
        </>
    )
}

repo: https://github.com/antonionetodeveloper/novo-portifolio

viniciusbecaleti

2 anos atrás

Talvez seja pq você não está usando o getStaticPaths, não vou saber te explicar pois eu ainda estou estudando e ainda tenho duvidas sobre isso também.

Porém, no tutorial do próprio Next Js, eles criam um blog, e quando ele vai fazer a consulta dos posts, ele precisa usar ambos, o getStaticProps, e o getStaticPaths pra "listar" quais são os dados dinâmicos... Segue o exemplo do tutorial aqui

AntonioNeto

Autor

2 anos atrás

Acredito que não seja isso, pois eu nem estou usando o getStaticPaths. Eu tô passando dentro do getStaticProps os "srcID" de cada imagem, aí eu passo esse retorno dentro do useContext para acessar em qualquer componente o local que a imagem está.

por exemplo:

import Image from "next/image"
import { useContext } from "react"
import { ContentContext } from "../.."

const Componente = () => {
    const { images } = useContext(ContentContext)
    
    return(
        <Image 
            src={images.profile}
            ...
        />
    )
}

images.profile me retornaria a string "portfolio/myPhoto_jsruis.png", mas o meu next já está configurado pra receber essa string no "src" do componente Image e proucurar no Cloudinary a imagem.

Volto a dizer que tudo em codeSandBox funciona certinho, o problema está no build.

AntonioNeto

Autor

2 anos atrás

SOLUÇÃO

Resolvi meu problema chamando as Imagens com o operador lógio "?"

ANTES:

<Image 
    src={images.profile}
    ...
/>

DEPOIS:

<Image 
    src={images?.profile}
    ...
/>

fernandordev

2 anos atrás

Aqui estou enfrentando o mesmo problema, e estou utilizando o "?" para resolve-lo porém ainda gostaria de saber porque acontece. Como as paginas são estáticas não deveria ocorrer esse problema, porque os dados já disponiveis para ser populados. Mas fica ai a duvida se alguem souber...

AntonioNeto

Autor

2 anos atrás

Acontece que o getStaticProps por mais que consiga as informações de modo estático, quando há o building da página, ele vai tentar gerar a página estática, mas dentro da página o conteúdo ainda é undefined.

getStaticProps não consegue gerar a página estática pois as informações que ele contém é renderizada antes de window ser definido. Então toda vez que ele tentar gerar no building(que de fato ele só funciona no building) ele vai retornar "undefined".

Uma solução que você pode fazer é tentar apurar essa informação e só utilizar ela se typeof window != "undefined", ou melhor, usando a "?".

a "?" faz o seguinte:
suponhamos que existe um objeto "pessoa".

    pessoa.cpf // undefined
    pessoa?.cpf // cpf

isso funciona, pois a "?" apura a informação e só exibe se ela existir.