Uncaught Error: Cannot find module './undefined' - reactjs

Question

I watched the code multiple times to figure out the problem but couldn't find the solution to this exception thrown at the console. The Product page blanks out.
Product.jsx
import React, { useEffect, useState } from 'react'
import Navbar from '../../Components/Navbar/Navbar'
import Announcment from '../../Components/Announcment/Announcment'
import Newsletter from '../../Components/Newsletter/Newsletter'
import Footer from '../../Components/Footer/Footer'
import styled from 'styled-components'
import './Product.css'
import { Add, Remove } from '#mui/icons-material'
import { useLocation } from 'react-router-dom'
import {publicRequest} from '../../requestMethod';
const Container = styled.div`
`
const Wrapper = styled.div`
padding: 50px;
display: flex;
`
const ImageContainer = styled.div`
flex: 1;
`
const InfoContainer = styled.div`
flex: 1;
padding: 0 50px;
`
const Title = styled.h1`
font-weight: 200;
`
const Desc = styled.p`
margin: 20px 0;
`
const Price = styled.span`
font-weight: 100;
font-size: 40px;
`
const FilterContainer = styled.div`
width: 50%;
display: flex;
justify-content: space-between;
margin: 30px 0;
`
const Filter = styled.div`
display: flex;
align-items: center;
`
const FilterTitle = styled.span`
font-size: 20px;
font-weight: 200;
`
const FilterColor = styled.div`
width: 20px;
height: 20px;
border-radius: 50%;
background-color: ${props => props.color};
margin: 0 5px;
cursor: pointer;
`
const FilterSize = styled.select`
margin-left: 10px;
padding: 5px;
`
const FilterSizeOption = styled.option`
`
const AddContainer = styled.div`
width: 50%;
display: flex;
align-items: center;
justify-content: space-between;
`
const AmountContainer = styled.div`
display: flex;
align-items: center;
font-weight: 700;
`
const Amount = styled.span`
width: 30px;
height: 30px;
border-radius: 10px;
border: 1px solid teal;
display: flex;
justify-content: center;
align-items: center;
margin: 0 5px;
`
const Button = styled.button`
padding: 15px;
border: 3px solid teal;
background-color: white;
cursor: pointer;
font-weight: 500;
&:hover{
background-color: #f8f4f4;
}
`;
const Product = () => {
const location = useLocation();
const Id = location.pathname.split('/')[2];
const [product, setProduct] = useState({});
useEffect(() => {
const getSingleProduct = async () => {
try {
const res = await publicRequest.get(`/products/find/${Id}`);
setProduct(res.data);
} catch (error) {
console.log(error);
}
}
getSingleProduct();
}, [Id]);
return (
<Container>
<Navbar />
<Announcment />
<Wrapper>
<ImageContainer>
<img src={require(`../../Assets/${product.img}`)} alt='' className='productImg2' />
</ImageContainer>
<InfoContainer>
<Title>{product.title}</Title>
<Desc>{product.desc}</Desc>
<Price>$ {product.price}</Price>
<FilterContainer>
<Filter>
<FilterTitle>Color</FilterTitle>
{product.color.map((c, i) => (
<React.Fragment key={i}>
<FilterColor color={c} />
</React.Fragment>
))
}
</Filter>
<Filter>
<FilterTitle>Size</FilterTitle>
<FilterSize>
{product.size.map((s, i) => (
<React.Fragment key={i}>
<FilterSizeOption>{s}</FilterSizeOption>
</React.Fragment>
))
}
</FilterSize>
</Filter>
</FilterContainer>
<AddContainer>
<AmountContainer>
<Remove style={{ cursor: "pointer" }} />
<Amount>1</Amount>
<Add style={{ cursor: "pointer" }} />
</AmountContainer>
<Button>ADD TO CART</Button>
</AddContainer>
</InfoContainer>
</Wrapper>
<Newsletter />
<Footer />
</Container>
);
}
export default Product
requestMethod.js
import axios from 'axios';
const BASE_URL = "http://localhost:5000/api";
const Token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYyZjI5NmRjY2JmYzNjZTAyNGRhODNlNSIsImlzQWRtaW4iOnRydWUsImlhdCI6MTY2MDEzMzExNiwiZXhwIjoxNjYwMzkyMzE2fQ.TMBcTYhOKhsGTqHgVY6fAGoX9UCc2rC100JwvzoSqhE";
export const publicRequest = axios.create({
baseURL:BASE_URL,
});
export const userRequest = axios.create({
baseURL:BASE_URL,
headers:{token:`Bearer ${Token}`},
});
error
.$:106 Uncaught Error: Cannot find module './undefined'
at webpackContextResolve (.$:106:1)
at webpackContext (.*$:101:1)
at Product (Product.jsx:120:1)
at renderWithHooks (react-dom.development.js:16305:1)
at mountIndeterminateComponent (react-dom.development.js:20074:1)
at beginWork (react-dom.development.js:21587:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27451:1)
The above error occurred in the component:
at Product (http://localhost:3000/static/js/bundle.js:3288:81)
at Routes (http://localhost:3000/static/js/bundle.js:56686:5)
at Router (http://localhost:3000/static/js/bundle.js:56619:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:55428:5)
at App

Answer 1

First time try to check if the product object it's not empty.
Or try every property with product?.title, product?.desc and so on

Answer 2

The issue has been solved by doing these changes.
const Product = () => {
const location = useLocation();
const Id = location.pathname.split('/')[2];
const [product, setProduct] = useState({});
useEffect(() => {
const getSingleProduct = async () => {
try {
const res = await publicRequest.get(`/products/find/${Id}`);
setProduct(res.data);
} catch (error) {
console.log(error);
}
}
getSingleProduct();
}, [Id]);
return (
<Container>
<Navbar />
<Announcment />
<Wrapper>
<ImageContainer>
<img src={product?.img ? require(`../../Assets/${product.img}`) : require('../../Assets/gray-men-shoes-1-free-img.jpg')} alt='' className='productImg2' />
</ImageContainer>
<InfoContainer>
<Title>{product?.title ? product.title : "Gray shoes"}</Title>
<Desc>{product?.desc ? product.desc : "abc"}</Desc>
<Price>$ {product?.price ? product.price : 20}</Price>
<FilterContainer>
<Filter>
<FilterTitle>Color</FilterTitle>
{product.color ? product.color.map((c, i) => (
<FilterColor color={c} key={i} />
))
: <><FilterColor color="black" /></>
}
</Filter>
<Filter>
<FilterTitle>Size</FilterTitle>
<FilterSize>
{product.size ? product.size.map((s, i) => (
<FilterSizeOption key={i}>{s}</FilterSizeOption>
))
: <> <FilterSizeOption >small</FilterSizeOption></>
}
</FilterSize>
</Filter>
</FilterContainer>
<AddContainer>
<AmountContainer>
<Remove style={{ cursor: "pointer" }} />
<Amount>1</Amount>
<Add style={{ cursor: "pointer" }} />
</AmountContainer>
<Button>ADD TO CART</Button>
</AddContainer>
</InfoContainer>
</Wrapper>
<Newsletter />
<Footer />
</Container>
);
}
export default Product