Stacktrace bug on dev: TypeError: The "payload" argument must be of type object. Received null
#75580
Labels
Error Handling
Related to handling errors (e.g., error.tsx, global-error.tsx).
Pages Router
Related to Pages Router.
Comments
github-actions
bot
added
Error Handling
|
I ran into this same error while implementing |
|
Another workaround is catching the badly printed error and logging its |
|
Happens to me as well. Downgraded to Next.js 14 and the original error was shown without any problem |
|
Having this issue with Of course, removing the image fixes it. import { ImageResponse } from "next/og"
export const alt = "About me"
export const size = {
width: 1200,
height: 630,
}
export const contentType = "image/png"
export default function Image() {
return new ImageResponse(
(
<div>
<img src="/logo.png" alt={alt} width={300} height={300} />
About me
</div>
),
{
...size,
},
)
} |
|
Despite removing images and fonts I still get this problem. And I am not using prisma. GET /api/starify?owner=KomoriDev&repo=Starify 500 in 614ms
✓ Compiled in 158ms (133 modules)
✓ Compiled in 178ms (133 modules)
✓ Compiled in 128ms (132 modules)
⨯ [TypeError: The "payload" argument must be of type object. Received null] {
code: 'ERR_INVALID_ARG_TYPE',
page: '/api/starify'
}Dependencies infomation: dependencies:
next 15.1.7
react 19.0.0
react-dom 19.0.0
devDependencies:
@types/node 20.17.19
@types/react 19.0.10
@types/react-dom 19.0.4
typescript 5.7.3This is my entire code/* eslint-disable @next/next/no-img-element */
import { fileURLToPath } from 'node:url';
import { dirname, join } from 'node:path';
import { readFile } from 'node:fs/promises';
import { ImageResponse } from 'next/og'
import type { NextRequest } from 'next/server'
import GithubRepo from '@/schema'
import { formatNumber } from '@/libs'
import { Text } from '@/components/ui/text'
import { Button } from '@/components/ui/button'
import { Section } from '@/components/ui/section'
import { Sponsor, Fork, Starred } from '@/components/icons'
export const config = {
runtime: 'node',
}
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
export async function GET(req: NextRequest) {
const { searchParams } = req.nextUrl
const owner = searchParams.get('owner')
const repo = searchParams.get('repo')
if (!owner || !repo) {
return new Response('Owner and Repo must be provided', { status: 400 })
}
const repoData = await GithubRepo.getRepoInfo(owner, repo)
const BASE_WIDTH = 500
const CHAR_WIDTH = 20
const elementWidth = (repoData.name.length + repoData.forks.toString().length + repoData.stars.toString().length ) * CHAR_WIDTH
const totalWidth = BASE_WIDTH + elementWidth
return new ImageResponse(
(
<main
style={{
width: '100%',
height: '6rem',
padding: '0 1rem',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-around',
border: 'solid #4b4b4b',
borderWidth: 1,
backgroundImage: 'radial-gradient(circle at 85% -10%, #263a2d 3%, #2b1e15 20%, #111111 100%)',
}}
>
<Section>
<img
width='28rem'
height='28rem'
src={repoData.avatar}
style={{'borderRadius': '0.5rem'}}
alt='avatar'
/>
<Text variant='title'>{repoData.name}</Text>
<Text variant='label'>{repoData.visibility}</Text>
</Section>
<Section styles={{marginRight: '3rem'}}>
<Button>
<Sponsor />
<Text variant='text'>Sponser</Text>
</Button>
<Button>
<Fork />
<Text variant='text'>Fork</Text>
<Text variant='counter'>{formatNumber(repoData.forks)}</Text>
</Button>
<Button>
<Starred />
<Text variant='text'>Starred</Text>
<Text variant='counter'>{formatNumber(repoData.stars)}</Text>
</Button>
{/* <img
width='80px'
height='80px'
src='#'
alt="illustration"
style={{
position: 'absolute',
bottom: '-30px',
right: '-55px',
}}
/>
<img
width='32px'
height='32px'
src='#'
alt="illustration"
style={{
position: 'absolute',
bottom: '-20px',
right: '95px',
}}
/>
<img
width='50px'
height='24px'
src='#'
alt="illustration"
style={{
position: 'absolute',
bottom: '28px',
right: '125px',
}}
/> */}
</Section>
</main>
),
{
width: totalWidth,
height: 96,
// fonts: [
// {
// name: 'OpenSans',
// data: await readFile(join(__dirname, '../../../assets/fonts/OpenSans-SemiBold.ttf')),
// weight: 600,
// style: 'normal',
// },
// ],
}
)
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Link to the code that reproduces this issue
https://github.com/martinezpl/nextjs-stacktrace-bug-reproduction
To Reproduce
npm installnpx --no-install prisma generatenpm run dev/api/testby sending a requestCurrent vs. Expected behavior
Expected behavior
The original error is raised:
Current behavior
The following error is raised and no stacktrace is provided:
Provide environment information
Operating System: Platform: darwin Arch: arm64 Version: Darwin Kernel Version 24.1.0: Thu Oct 10 21:06:57 PDT 2024; root:xnu-11215.41.3~3/RELEASE_ARM64_T6041 Available memory (MB): 24576 Available CPU cores: 12 Binaries: Node: 20.18.1 npm: 10.8.2 Yarn: N/A pnpm: 9.15.1 Relevant Packages: next: 15.2.0-canary.33 // Latest available version is detected (15.2.0-canary.33). eslint-config-next: N/A react: 19.0.0 react-dom: 19.0.0 typescript: 5.7.3 Next.js Config: output: N/AWhich area(s) are affected? (Select all that apply)
Error Handling, Pages Router
Which stage(s) are affected? (Select all that apply)
next dev (local)
Additional context
This issue appears only on dev stage, the stacktrace is logged correctly when the error is raised in the production version.
Using Prisma as an example as this is how I encountered it and I've found others reporting this issue:
prisma/prisma#26178
Reddit Thread
But likely it is not Prisma specific.
The
stackproperty of the raised error does lead to the original error, so the issue seems to be with the pretty printing functionality in server/patch-error-inspectThe text was updated successfully, but these errors were encountered: