I have the following component which renders a list of properties, with each one clickable to an individual slug page with more details about the chosen property:
app > for-sale > page.jsx
'use client'
import { ArticleCardFooter } from "@/components/ArticleCardFooter";
import { Container, Grid } from '@mantine/core';
import datasource from "../../datalayer";
import Pagination from "@/components/Pagination";
const ForSalePropertiesPage = async () => {
const { properties, pagination } = await datasource.getProperties(5);
return (
<Container>
<Grid>
{properties?.map((property, index) => (
<Grid.Col key={index} span={{ base: 12, sm: 6, lg: 4 }}>
<ArticleCardFooter key={index} property={property} />
</Grid.Col>
))}
</Grid>
<Pagination href='/for-sale' page={page} pageCount={pagination?.pageCount} />
</Container >
);
};
export default ForSalePropertiesPage
Everything on this page works as expected, and when hitting the page for the first time, properties load as expected. However, the issue occurs when navigating from a slug page:
app > for-sale > [slug] > page.jsx
import { Button, Container } from '@mantine/core';
import datasource from '../../../datalayer';
import { notFound } from 'next/navigation';
import Link from 'next/link';
const PropertyDetailsPage = async ({ params: { slug } }) => {
const property = await datasource.getProperty(slug);
if (!property) {
notFound();
}
return (
<Container>
<Link href='/for-sale'>
<Button variant='outline'>Back to results</Button>
</Link>
<h1>
{property.addressLineOne}
</h1>
<h2>{property?.price}</h2>
</Container>
);
};
export default PropertyDetailsPage;
Again, this component renders and behaves as expected, but when I use the button to navigate back to the results page, I get the following error:
TypeError: datalayer__WEBPACK_IMPORTED_MODULE_2_.default.getProperties is not a function
Can anyone advise where I might be going wrong?