I can run without problem npm run dev
and the application works fine. But when I run npm run build
I get the following error.
Build error occurred
Error: Build optimization failed: found pages without a React Component as default export in
pages/category/[id]/getServerSideProps
pages/category/[id]/category
This is my folder structure:
index.ts:
import { CategoryPage } from './category';
export { getServerSideProps } from './getServerSideProps';
export default CategoryPage;
category.tsx:
import FinanceOptions from 'components/financeOptions';
import Head from 'next/head';
import React from 'react';
import { Container } from 'react-bootstrap';
interface CategoryPagePropsInterface {
category: {
id: number,
name: string,
}
}
export const CategoryPage = ({ category }: CategryPagePropsInterface): JSX.Element => (
<div>
<Head>
<title>Category page</title>
<meta name="description" content="Category page" />
<link rel="icon" href="/favicon.ico" />
</Head>
<Container>
<FinanceOptions category={category} />
</Container>
</div>
);
getServerSideProps:
import {requestCategoryById} from 'models/category/request';
import {NextPageContext} from 'next'
/**
*
* @param NextPageContext context
*/
export const getServerSideProps = async (context: NextPageContext) => {
const {query: {handle}} = context;
const { category } = await requestCategoryById(handle as string);
return {props: {category}};
}