[NEXT-1266] App router doesn't allow to export a reusable server function

[maruffahmed]

Verify canary release

• [x] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Pro
    Binaries:
      Node: 16.14.2
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.4.4-canary.13
      eslint-config-next: 13.4.1
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.0.4

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue or a replay of the bug

https://codesandbox.io/p/sandbox/aged-cache-l9xyus

To Reproduce

I'm trying to export a function from my photos/[id]/page.tsx page which allow me to fetch a photo from unsplash by id.

photos/[id]/page.tsx:

// This is the function I'm trying to export and use in another page
export async function getPhoto(id: string): Promise<PhotoType> {
  const res = await fetch(
    `https://api.unsplash.com/photos/${id}/?client_id=${process.env.UNSPLASH_API_KEY}`
  );
  const photos = await res.json();
  return photos;
}
// page export
export default async function PhotoPage({
  params,
}: {
  params: { id: string };
}) {
  const photo = await getPhoto(params.id);
  return (
    <div>
      <h1>Photo Page</h1>
      <Image
        src={photo.urls.regular}
        alt={photo.alt_description}
        width={photo.width}
        height={photo.height}
      />
    </div>
  );
}

Describe the Bug

The development server is working fine but the build command throwing an error into the CLI.

It looks like the app router is only allowing me to export function with name "metadata" | "default" | "config" | "generateStaticParams" | "revalidate" | "dynamic" | "dynamicParams" | "fetchCache" | "preferredRegion" | "runtime" | "generateMetadata".

And throwing the error Type '(id: string) => Promise<PhotoType>' is not assignable to type 'never'.

Expected Behavior

The build process should be successful without any problem.

I know I could move the export async function getPhoto(id:string) function to an utils/lib file but exporting a reusable async function from the page.tsx should be also fine.

If it is the way of NextJs at least we may add the error at the dev server too so we could know what's going wrong with our page.tsx. Or an eslint role or typescript error so we are concerned about the export function name at development time.

Which browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

No response

_NEXT-1266

[ChandanJal]

Hey @maruffahmed, Your code is working fine on my computer . Could you upgrade your node version I'm currently running on node -v18.16.0

[maruffahmed]

Hey @maruffahmed, Your code is working fine on my computer . Could you upgrade your node version I'm currently running on node -v18.16.0

@ChandanJal I'm not sure if you already tried to build the above code. My issues were in the build process, my development server also working fine.

And this is my concern, if it's working on the development server it should build successfully. Otherwise bring the error to the development server so i could improve my development experience.

[ChandanJal]

@maruffahmed I've created a build also.