[ReactJS]

~/Documents/Programming/Dunna/client (main) $ yarn build yarn run v1.22.10 $ next build Browserslist: caniuse-lite is outdated. Please run: npx browserslist@latest --update-db (node:13948) ExperimentalWarning: The fs.promises API is experimental Loaded env from C:\Users\reish\Documents\Programming\Dunna\client.env.local info - Using external babel configuration from C:\Users\reish\Documents\Programming\Dunna\client\babel.config.js info - Creating an optimized production build info - Compiled successfully info - Collecting page data
[== ] info - Generating static pages (0/15)(node:14416) ExperimentalWarning: The fs.promises API is experimental (node:21788) ExperimentalWarning: The fs.promises API is experimental [ ===] info - Generating static pages (0/15)(node:23920) ExperimentalWarning: The fs.promises API is experimental (node:21516) ExperimentalWarning: The fs.promises API is experimental (node:19580) ExperimentalWarning: The fs.promises API is experimental (node:23568) ExperimentalWarning: The fs.promises API is experimental (node:24720) ExperimentalWarning: The fs.promises API is experimental (node:14684) ExperimentalWarning: The fs.promises API is experimental (node:12000) ExperimentalWarning: The fs.promises API is experimental (node:8452) ExperimentalWarning: The fs.promises API is experimental (node:17956) ExperimentalWarning: The fs.promises API is experimental (node:13536) ExperimentalWarning: The fs.promises API is experimental (node:26760) ExperimentalWarning: The fs.promises API is experimental [ ==] info - Generating static pages (0/15)(node:2564) ExperimentalWarning: The fs.promises API is experimental
(node:8940) ExperimentalWarning: The fs.promises API is experimental [ =] info - Generating static pages (0/15) Error occurred prerendering page "/shop/[id]". Read more: https://err.sh/next.js/prerender-error TypeError: Cannot read property 'images' of undefined at _id_product (C:\Users\reish\Documents\Programming\Dunna\client.next\server\pages\shop[id].js:329:51) at d (C:\Users\reish\Documents\Programming\Dunna\client\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:33:498) at bb (C:\Users\reish\Documents\Programming\Dunna\client\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:36:16) at a.b.render (C:\Users\reish\Documents\Programming\Dunna\client\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:42:43) at a.b.read (C:\Users\reish\Documents\Programming\Dunna\client\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:41:83) at exports.renderToString (C:\Users\reish\Documents\Programming\Dunna\client\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:52:138) at renderPage (C:\Users\reish\Documents\Programming\Dunna\client\node_modules\next\dist\next-server\server\render.js:53:851) at Object.ctx.renderPage (C:\Users\reish\Documents\Programming\Dunna\client.next\server\pages_document.js:811:30)
at Function.getInitialProps (C:\Users\reish\Documents\Programming\Dunna\client.next\server\pages_document.js:289:19) at Function.getInitialProps (C:\Users\reish\Documents\Programming\Dunna\client.next\server\pages_document.js:815:87) info - Generating static pages (15/15)


Build error occurred Error: Export encountered errors on following paths: /shop/[id] at exportApp (C:\Users\reish\Documents\Programming\Dunna\client\node_modules\next\dist\export\index.js:30:1103)
at process._tickCallback (internal/process/next_tick.js:68:7) error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
​

export interface ProductInterface {
_id: number
stock_id: number
name: string
description: string
price: number
stone: string & StonesAndShapes & { value: string; label: string }
stoneWeigth: number
diamondWeigth: number
shape: string & StonesAndShapes & { value: string; label: string }
images?: ImageProduct[]
}


import { GetStaticPaths, GetStaticProps } from 'next'
import React, { useEffect, useState } from 'react'
import axios from '../../../axios'

import {
Container,
BigImageContainer,
SmallImageContainer,
Img,
LeftContainer,
RightContainer,
Description,
Price,
Span,
Title,
UppercaseText,
PriceSpan,
SelectableImage,
GridContainer,
CheckList
} from '../../styles/pages/shop/product'

import Head from 'next/head'
import { ProductInterface } from '../../components/product'
import { InlineButton } from '../../components/button'
import { FiCheckCircle } from 'react-icons/fi'

import ReactImageMagnify from 'react-image-magnify'
import { checkIfProductIsInCart, useCart } from '../../context/Cart'
import withCart from '../../HOC/withCart'

import NoImage from '../../images/noimage.png'
import { FaWeight } from 'react-icons/fa'
import { RiVipDiamondLine } from 'react-icons/ri'

interface Props {
product: ProductInterface
}

const containerVariant = {
hidden: { opacity: 1, scale: 0 },
visible: {
opacity: 1,
scale: 1,
transition: {
delayChildren: 0.3,
staggerChildren: 0.2
}
}
}

const BigImageVariant = {
hidden: { opacity: 0, y: -50 },
visible: {
opacity: 1,
y: 0,
transition: {
duration: 0.6
}
}
}

const SmallImageVariant = {
hidden: { opacity: 0, y: 50 },
visible: {
opacity: 1,
y: 0,
transition: {
duration: 0.8
}
}
}

const RightContainerVariant = {
hidden: { opacity: 0, x: -100 },
visible: {
opacity: 1,
x: 0,
transition: {
duration: 0.6
}
}
}

const product: React.FC<Props> = ({ product }) => {
const [selectedImage, setSelectedImage] = useState(
product.images.length > 0 ? product.images[0].url : NoImage
)
const { cart, addProduct } = useCart()
const [isActive, setIsActive] = useState(true)

useEffect(() => {
if (checkIfProductIsInCart(cart, product)) {
setIsActive(false)
} else {
setIsActive(true)
}
}, [cart])

return (
<>
<Head>
<title>Product - {product.name}</title>
</Head>
<Container
variants={containerVariant}
initial="hidden"
animate="visible"
>
<GridContainer>
<LeftContainer>
<BigImageContainer variants={BigImageVariant}>
<ReactImageMagnify
enlargedImagePosition="over"
largeImage={{
src: selectedImage,
width: 2400,
height: 1800
}}
smallImage={{
alt: 'Image',
isFluidWidth: true,
src: selectedImage
}}
/>
</BigImageContainer>
<SmallImageContainer
variants={SmallImageVariant}
imagesNumber={
product.images.length > 0
? product.images.length
: 3
}
>
{product.images.length > 0 ? (
product.images.map((image, index) => (
<SelectableImage
src={image.url}
alt={'Image ' + index}
key={image._id}
onClick={() =>
setSelectedImage(image.url)
}
active={image.url === selectedImage}
/>
))
) : (
<SelectableImage
src={NoImage}
alt={'noImage'}
key={'noImage'}
onClick={() => {}}
active={true}
/>
)}
</SmallImageContainer>
</LeftContainer>
<RightContainer variants={RightContainerVariant}>
<Title>{product.name}</Title>
<UppercaseText>
By <Span>Dunna Jewelry</Span>
</UppercaseText>
<Price>
<PriceSpan>R$</PriceSpan>
{(product.price / 100).toFixed(2)}
</Price>
<Description>{product.description}</Description>
<InlineButton
onClick={() => addProduct(product)}
disabled={!isActive}
>
{isActive
? 'Adicionar ao carrinho'
: 'Produto adicionado'}
</InlineButton>
<CheckList>
<li>
<FaWeight />
<span>
Peso da Pedra: {product.stoneWeigth} ct
</span>
</li>
{product.diamondWeigth > 0 && (
<li>
<RiVipDiamondLine />
<span>
Peso da diamante:{' '}
{product.diamondWeigth} ct
</span>
</li>
)}
<li>
<FiCheckCircle />
<span>Joia feita à mão</span>
</li>
<li>
<FiCheckCircle />
<span>Design único</span>
</li>
<li>
<FiCheckCircle />
<span>Lapidada por profissionais</span>
</li>
</CheckList>
</RightContainer>
</GridContainer>
</Container>
</>
)
}

export const getStaticPaths: GetStaticPaths = async ctx => {
const { data: products } = await axios.get('/products')

const paths = products.map(product => ({
params: {
id: product._id
}
}))

return {
paths,
fallback: true
}
}

export const getStaticProps: GetStaticProps = async ctx => {
const { data: product } = await axios.get('/product/' + ctx.params.id)

return {
props: {
product
}
}
}

export default product
// export default withCart(product)

Continue reading...