Ingap.dev - A Personal Dev Blog

Hey fellow developers! 👋 If you're new to Next.js 13 and its App Router (a new routing system that maps the local path to page.tsx in your app to URLs directly and handles routing, fetching data, and rendering), you might encounter a tricky situation: a type error that only shows up during npm run build, not when using npm run dev.

This can be especially confusing when you're first learning how the App Router works. Let's break down this common issue and how to fix it!

PS: I'll assume typescript as a developing language, but same solution applies to javascript too.

The Problem

When deploying a Next.js project using the vercel command or running npm run build, you might encounter an error similar to the following:

Type error: Type 'OmitWithTag<typeof import(".../page"), "metadata" | "default" | "config" | "generateStaticParams" | "revalidate" | ... 8 more ... | "generateViewport", "">' does not satisfy the constraint '{ [x: string]: never; }'.
  Property '...' is incompatible with index signature.  Type 'FC<{}>' is not assignable to type 'never'.

Solution

To fix this, you need to move all exports out of page.tsx into a separate file and ensure only one function is exported from page.tsx using a consistent export pattern. This approach helps avoid conflicts and ensures a smoother build process.

WRONG code:

export const TemplatePage = () => {
  return <div>Template Page</div>;
}

export const AnotherComponent = () => {
  return <div>Another Component</div>;
}

export default TemplatePage;

The CORRECT approach is to move all exports out of page.tsx into a .tsx file which must not be called page.tsx, of course.

Therefore, create a separate file to handle your exports and then import them into your page.tsx.

// templatePage.tsx
export const TemplatePage = () => {
  return <div>Template Page</div>;
}

// page.tsx
import { TemplatePage } from './templatePage';

const Page = () => {
  return <TemplatePage />;
}

export default Page;

Please also follow the correct export pattern! Indeed, the following code will also cause errors:

export const functionName = () => {
  // Your code here
}
export default functionName;

That's because you've repeated the "export" statement twice. Instead, this is the correct syntax:

const functionName = () => {
  // Your code here
}
export default functionName;

or this one:

export default const functionName = () => {
  // Your code here
}

Conclusion

By following these steps, you can resolve the build issues related to the OmitWithTag type error in your Next.js 13 project with the App Router.

If you continue to encounter issues, please contact me and include the URL of the post in your message.