nextjs - 💡(How to fix) Fix Support `satisfies` for metadata and viewport exports in TypeScript IDE plugin [1 participants]

nextjs2025-09-23 23:53:32

ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

GitHub issue URL

Helpful · Quick feedback

GitHub stats

vercel/next.js#84159•Fetched 2026-04-08 02:20:25

View on GitHub

Comments

Participants

Timeline

Reactions

Author

GRA0007

Participants

GRA0007

Timeline (top)

issue_type_added ×1labeled ×1

Error Message

// This will error as title is required, but Metadata defines it as optional (potentially undefined), even though it's defined in the object above

Code Example

import { Metadata } from 'next'

    export const metadata = {
      title: 'My Website',
    } satisfies Metadata

---

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 25.0.0: Mon Aug 25 21:17:51 PDT 2025; root:xnu-12377.1.9~3/RELEASE_ARM64_T6000
  Available memory (MB): 16384
  Available CPU cores: 10
Binaries:
  Node: 22.15.0
  npm: 10.9.2
  Yarn: N/A
  pnpm: 10.15.0
Relevant Packages:
  next: 15.5.2
  eslint-config-next: N/A
  react: 19.1.1
  react-dom: 19.1.1
  typescript: 5.9.2
Next.js Config:
  output: N/A

---

import { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'My Page',
}

function ExampleComponent(props: { title: string }) { return null }

export default function() {
  return <ExampleComponent title={metadata.title} />
  //                                       ^^^^^
  // This will error as `title` is required, but Metadata defines it as optional (potentially undefined), even though it's defined in the object above
}

---

import { Metadata } from 'next'

export const metadata = {
  title: 'My Page',
} satisfies Metadata

function ExampleComponent(props: { title: string }) { return null }

export default function() {
  return <ExampleComponent title={metadata.title} />
  // This will now work correctly as `title` is typed at `string`
}

RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/stupefied-drake-djhgvk?workspaceId=ws_FFy8WZFGHmk9xkeVqwsT43

To Reproduce

Create a metadata export in a Next.js page.tsx or layout.tsx file, using the satisfies keyword instead of directly setting the type:
```
import { Metadata } from 'next'

export const metadata = {
  title: 'My Website',
} satisfies Metadata
```
Enable the Next.js TypeScript IDE plugin
Notice that TypeScript emits the warning The Next.js "metadata" export should be type of "Metadata" from "next". despite the object being typed with the satisfies keyword.

Current vs. Expected behavior

I would expect the Next.js IDE plugin to detect the use of the satisfies operator and not emit a warning in this situation.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 25.0.0: Mon Aug 25 21:17:51 PDT 2025; root:xnu-12377.1.9~3/RELEASE_ARM64_T6000
  Available memory (MB): 16384
  Available CPU cores: 10
Binaries:
  Node: 22.15.0
  npm: 10.9.2
  Yarn: N/A
  pnpm: 10.15.0
Relevant Packages:
  next: 15.5.2
  eslint-config-next: N/A
  react: 19.1.1
  react-dom: 19.1.1
  typescript: 5.9.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

TypeScript

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

It's worth noting why it's important to support the satisfies operator here. We sometimes need to use the values for title, description, etc. in other places, and rather than define these in a 3rd object, we can directly import the metadata from routes. This ensures that the info can still be updated in the same place, which brings consistency, but also that we only have to update it in one place, reducing repetition. With the object directly typed, intellisense will not correctly know which keys have been defined to which exact types, and in the case of title and others, what shape is defined.

An example:

Without `satisfies`

import { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'My Page',
}

function ExampleComponent(props: { title: string }) { return null }

export default function() {
  return <ExampleComponent title={metadata.title} />
  //                                       ^^^^^
  // This will error as `title` is required, but Metadata defines it as optional (potentially undefined), even though it's defined in the object above
}

With `satisfies`

import { Metadata } from 'next'

export const metadata = {
  title: 'My Page',
} satisfies Metadata

function ExampleComponent(props: { title: string }) { return null }

export default function() {
  return <ExampleComponent title={metadata.title} />
  // This will now work correctly as `title` is typed at `string`
}

extent analysis

TL;DR

The Next.js IDE plugin may not support the satisfies operator for typing the metadata export, causing a warning despite the object being correctly typed.

Guidance

The issue seems to be related to the Next.js IDE plugin not recognizing the satisfies operator for typing the metadata export.
To verify, try disabling the Next.js IDE plugin and check if the warning persists.
As a potential workaround, consider using the as keyword for type assertion instead of the satisfies operator, although this may not provide the same level of type safety.
If the issue persists, it may be worth opening an issue with the Next.js team to request support for the satisfies operator in the IDE plugin.

Example

import { Metadata } from 'next'

export const metadata = {
  title: 'My Website',
} as Metadata

Note that this example uses type assertion with the as keyword, which may not provide the same level of type safety as the satisfies operator.

Notes

The satisfies operator is a relatively new feature in TypeScript, and support for it may vary across different tools and plugins. If the Next.js IDE plugin does not support it, it may be worth exploring other typing options or waiting for an update to the plugin.

Recommendation

Apply workaround: Use type assertion with the as keyword instead of the satisfies operator, as shown in the example above. This may not provide the same level of type safety, but it can help avoid the warning in the short term.

Vote matrix · Quick signals

Works

Did the solution work? Tap to confirm.

Easy Fix

Was it a quick fix?

Time Saver

Did it save you time?

Blocking

Was it severely blocking?

Common Issue

Are others likely hitting this too?

Flaky / Intermittent

Is it intermittent?

Verified / Reproducible

Can you reproduce it reliably?

#api #integration issue #index setup #retrieval issue #search optimization

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Data

Security

Network

Code

UI/UX

Text

System

Multimedia

Protocol

API

Engineering

nextjs - 💡(How to fix) Fix Support `satisfies` for metadata and viewport exports in TypeScript IDE plugin [1 participants]

Recommended Tools

GitHub issue graph ai analysis

Error Message

Code Example

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Provide environment information

Which area(s) are affected? (Select all that apply)

Which stage(s) are affected? (Select all that apply)

Additional context

Without `satisfies`

With `satisfies`

extent analysis

TL;DR

Guidance

Example

Notes

Recommendation

Still need to ship something?

TRENDING

nextjs - 💡(How to fix) Fix Support `satisfies` for metadata and viewport exports in TypeScript IDE plugin [1 participants]

Recommended Tools

GitHub issue graph ai analysis

Error Message

Code Example

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Provide environment information

Which area(s) are affected? (Select all that apply)

Which stage(s) are affected? (Select all that apply)

Additional context

Without satisfies

With satisfies

extent analysis

TL;DR

Guidance

Example

Notes

Recommendation

Still need to ship something?

RELATED_DISCOVERY

TRENDING

Without `satisfies`

With `satisfies`