search

nextui-org / next-app-template

A Next.js 14 with app directory template pre-configured with NextUI (v2) and Tailwind CSS.
https://nextui-app.vercel.app
MIT License
301 stars 72 forks source link

Unsupported metadata themeColor - Next.js 14.0.2 #12

Closed joelrb closed 6 months ago

joelrb commented 9 months ago

Just created app using the template. npx create-next-app@latest myapp -e https://github.com/nextui-org/next-app-template

After setup, I immediately ran it. Warning in terminal: ⚠ Unsupported metadata themeColor is configured in metadata export. Please move it to viewport export instead.

Thanks for fixing. Great work!

Hahlh commented 9 months ago

Can confirm, fresh setup & happening for me as well.

joelrb commented 7 months ago

I'm sure it's beeen resolved, but you have to move it from metadata to viewport like so

export const viewport = { themeColor: [ { media: '(prefers-color-scheme: dark)', color: 'black' }, { media: '(prefers-color-scheme: light)', color: 'white' } ] }

I just tried to create next app from template to see if it's been resolved. It's not yet resolved.

The issue is caused by calling Metadata interface in the layout.tsx.

Screenshot 2024-04-12 010105

manishtiwari25 commented 7 months ago

This can be fixed by following.

export const viewport: Viewport = {
  themeColor: [
    { media: "(prefers-color-scheme: light)", color: "white" },
    { media: "(prefers-color-scheme: dark)", color: "black" },
  ],
}

~There is a PR already raised https://github.com/nextui-org/next-app-template/pull/18 which will fix this.~

This is already fixed by this commit on main https://github.com/nextui-org/next-app-template/commit/44b9a9320938d8955ec84e849a7c27404c489e0b

The issue can be closed now. :)