Importing a page from another component in Nextjs app router

Issue

I am using nextjs app router. and i have this folder strucutre:

app/
├─ /companies/
│  ├─ page.tsx
├─ /administrators/
│  ├─ page.tsx

I am trying to import companies/page.tsx component inside the administrators/page.tsx component.

The purpose is i have a small modal that opens and it shows a portal view for the companies page.

In context, it works perfectly during development, however, after the building phase, Nextjs throws an error:

Type error: Page "src/app/companies/page.tsx" has an invalid "default" export:
  Type "CompaniesPageProps" is not valid.

The code I have for the companies component is this:

export interface CompaniesPageProps {
  onSaveSuccess?: ()=> void
}
const CompaniesPage = (props: CompaniesPageProps)=> {
  // ... etc some logic, then: onSaveSuccess.?("hi")
  return <p>Hello world</p>
}
export default CompaniesPage

And this is the administrators page:

import CompaniesPage from '@/companies/page.tsx'

const AdministratorsPage = ()=> {
  return (
   <div>
    <button onClick={openModal}>click me</button>
    <Modal open={isOpen}>
      <CompaniesPage onSaveSuccess={()=> closeModal()}>
    </Modal>
   </div>
  )

}

export default AdministratorsPage

Solution

I would suggest pulling the page contents for companies page out into a Companies.tsx component that both administrators/page.tsx and companies/pages.tsx use. That's what we've done for a similar situation and it works fine.

Answered By - Glitcher