Npm run build error! Help!

[christian-anunciado]

Summary

Hi, I'm trying to build my nextjs using appDir. The app works fine when runned on npm run dev but an error is thrown when I try to build it. Here is the error:

Type error: Type 'OmitWithTag<typeof import("D:/Documents/School/4th year/2nd sem/Alliance (Industy Elective 3)/Subscription Manager App/app/(portal)/customers/[id]/page"), "metadata" | "default" | ... 8 more ... | "generateMetadata", "">' does not satisfy the constraint '{ [x: string]: never; }'.
  Property 'ContactDetail' is incompatible with index signature.
    Type '(props: ContactDetailProps) => JSX.Element' is not assignable to type 'never'.

Code for my component:

export interface ContactDetailProps {
  icon: JSX.Element;
  title: string;
  content: string;
}

export const ContactDetail = (props: ContactDetailProps) => {
  return (
    <>
      <Flex gap={'2'} alignItems={'center'}>
        <Circle size={'35px'} bg="gray.100">
          {props.icon}
        </Circle>
        <Flex direction={'column'}>
          <Text fontWeight={'medium'} color={'gray.700'} fontSize={'md'}>
            {props.title}
          </Text>
          <Text color={'gray.500'} fontSize={'sm'}>
            {props.content}
          </Text>
        </Flex>
      </Flex>
    </>
  );
};

Implementing my code and passing props:

const FooPage = () => {
  return (
    <> 
      <div>
         ...
          <div>
               <ContactDetail
                          icon={<EnvelopeIcon className="h-4 w-4 text-slate-800" />}
                          title={'Email'}
                          content="wade.watts@gmail.com"
                        />
          </div>
       </div>
  </>

### Additional information

_No response_

### Example

_No response_

[Hamzi-SE]

Try this one. Open next.config.js and enable the ignoreBuildErrors option in the typescript config:

module.exports = {
  typescript: {
    // !! WARN !!
    // Dangerously allow production builds to successfully complete even if
    // your project has type errors.
    // !! WARN !!
    ignoreBuildErrors: true,
  },
}

[Steellgold]

Thanks 👌

[soni-canra-wiguna]

thank you so much!!

[dh7hong]

For me, there was no next.config.js file. Instead I had a next.config.mjs file. My next.config.mjs file should be able to fix the error you're getting.

// next.config.mjs
import path from 'path';

const nextConfig = {
  webpack(config, { isServer }) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"],
    });

    // Fixes npm packages that depend on `fs` module
    if (!isServer) {
      config.resolve.fallback = {
        ...config.resolve.fallback,
        fs: false,
      };
    }

    // Add custom webpack configurations here
    config.resolve.alias = {
      ...config.resolve.alias,
      '@': path.resolve('src'),
    };

    return config;
  },
  reactStrictMode: false,
  typescript: {
    // Ignore TypeScript errors during the build process
    ignoreBuildErrors: true,
  },
};

export default nextConfig;

[ValentinZoia]

Thanks!🙌

[teja-atukuri21]

Thank you so much... Very helpful

[juanevp]

EDIT: I see that people keep liking the dubious idea of ignoring typescript errors when the resolution of this problem is relatively straightforward. But maybe my original answer was as cryptic as the message. The gist of it is: don't export your functions or data from Next.js special files (pages, layouts and routes). Not even the page/layout component as a named export, only as the default export.
If you have anything to export move it to another file and do it from there. In the special files the only exports allowed are those listed in the type I referenced below (the keys of that interface)

After looking into the webpack plugin I discovered that this error is a (terribly cryptic) way of stating that a special file is exporting an identifier that is not included in the allowed exports. The list of allowed exports are the keys of the type defined here:

next.js/packages/next/src/build/webpack/plugins/next-types-plugin.ts

Lines 57 to 79 in 804ca09

	checkFields<Diff<{
	${
	options.type === 'route'
	? HTTP_METHODS.map((method) => `${method}?: Function`).join('\n ')
	: 'default: Function'
	}
	config?: {}
	generateStaticParams?: Function
	revalidate?: RevalidateRange<TEntry> | false
	dynamic?: 'auto' | 'force-dynamic' | 'error' | 'force-static'
	dynamicParams?: boolean
	fetchCache?: 'auto' | 'force-no-store' | 'only-no-store' | 'default-no-store' | 'default-cache' | 'only-cache' | 'force-cache'
	preferredRegion?: 'auto' | 'global' | 'home' | string | string[]
	runtime?: 'nodejs' | 'experimental-edge' | 'edge'
	${
	options.type === 'route'
	? ''
	: `
	metadata?: any
	generateMetadata?: Function
	`
	}
	}, TEntry, ''>>()

[Surefire10]

Thank you. this solved my problem

[Smartech-git]

I think this is the best remedy and explanation of the cause. Thanks alot

[mscottford]

I was getting this error because I had defined generateMetadata as

export async function generateMetadata(
  parent: ResolvingMetadata
): Promise<Metadata> {

changing it to

export async function generateMetadata(): Promise<Metadata> {

fixed the problem.

I don't remember why I added the parent parameter. I wasn't actually using it.

[alexrabin]

This worked for me! I originally had the parent: ResolvingMetadata from the Next.js documentation on generateMetadata https://nextjs.org/docs/app/api-reference/functions/generate-metadata#generatemetadata-function.

[heatherdg]

I received this error because I was exporting from my root layout page. Once I moved the code I needed to export out of the layout file and imported it instead, my issue went away.

[pedro-santos21]

exporting what?

[a0m0rajab]

Exporting functions from root page gave me the same error, thanks for your comment!

[retr00exe]

You need to export default your component/page, I also facing this problem
Here's an example of my original code

'use client';

import { SliceZone } from '@prismicio/react';
import {
	SliceSimulator,
	SliceSimulatorParams,
	getSlices
} from '@slicemachine/adapter-next/simulator';

import { components } from '../../../../slices';

export const SliceSimulatorPage = async ({ searchParams }: SliceSimulatorParams) => {
	const slices = getSlices(searchParams.state);

	return (
		<SliceSimulator>
			<SliceZone slices={slices} components={components} />
		</SliceSimulator>
	);
};

It returns this error

Type error: Type 'OmitWithTag<typeof import("C:/Users/Mekel/Documents/Dev/Viska/monorepo/customers/upsell-demo-web/app/(routes)/(prismic)/slice-simulator/page"), "metadata" | "default" | "config" | "generateStaticParams" | "revalidate" | "dynamic" | "dynamicParams" | "fetchCache" | "preferredRegion" | "runtime" | "maxDuration" | "generateMetadata" | "viewport" | "generateViewport", "">' does not satisfy the constraint '{ [x: string]: never; }'.
  Property 'SliceSimulatorPage' is incompatible with index signature.
    Type '({ searchParams }: SliceSimulatorParams) => Promise<JSX.Element>' is not assignable to type 'never'.
   6 |
   7 | // Check that the entry is a valid entry
>  8 | checkFields<Diff<{
     |             ^
   9 |   default: Function
  10 |   config?: {}
  11 |   generateStaticParams?: Function
Build process exited due to code 1  

Then I fixed it by simply export default the component on the page

'use client';

import { SliceZone } from '@prismicio/react';
import {
	SliceSimulator,
	SliceSimulatorParams,
	getSlices
} from '@slicemachine/adapter-next/simulator';

import { components } from '../../../../slices';

const SliceSimulatorPage = async ({ searchParams }: SliceSimulatorParams) => {
	const slices = getSlices(searchParams.state);

	return (
		<SliceSimulator>
			<SliceZone slices={slices} components={components} />
		</SliceSimulator>
	);
};

export default SliceSimulatorPage;

[faizbyp]

thank you very much! for me, i have the code like this:

export const Component ...
export default Component;

simply changed it to:

const Component ...
export default Component;

not expecting such a single export word is so crucial 😅

[sebastiancoronel]

I got a similar error. I was using the name page.tsx to each component created in my project which NextJS was including them in the app router, so I solved that renaming the files to not include them in the router. That solved my problem.

[python08]

export interface ColorModeContextType {
toggleColorMode: () => void;
}

// Create the context with a default value
const ColorModeContext = createContext({
toggleColorMode: () => {},
});

I was getting the same error in the above code for context, this code was declared inside the layout.tsx component. I moved this to a different file and exported it as default.

[cyjico]

I saved mine simply by not having two exports in Next.js special files (pages, layouts, etc.).

I moved my other export to a different file and imported from there which fixed my problem.

[marioportillohernaiz]

This solution was much easier than I thought; it didn't require any changes or additions to the code.

Essentially, in Next.js, a page.tsx is a special file that has built-in default props. In my case, where I wanted to pass custom props, these two sets of props didn't match, resulting in the error: Property 'AcctountProps' is incompatible with index signature. The index signature refers to the default props in Next.js' definition of page.tsx.

The solution was simply to rename the files from:

app
 |--- create account
        |--- page.tsx
        |--- layout.tsx

to

app
 |--- create account
        |--- AccountPage.tsx
        |--- page.tsx

Instead of layout.tsx containing my server-side code and page.tsx containing my client-side code, I made page.tsx server-side with no custom props, and then had the client-side AccountPage.tsx to handle the custom props.