next.js: Meta theme-color is missing in the html, while meta viewport value is incorrect

Link to the code that reproduces this issue

https://github.com/Senbonzakura1234/debug-metadata

To Reproduce

1/ run next dev

Current vs. Expected behavior

log show

 ⚠ Unsupported metadata themeColor is configured in metadata export. Please move it to viewport export instead.
 ⚠ Unsupported metadata viewport is configured in metadata export. Please move it to viewport export instead.

those 2 meta field didn’t rendered to the html

change the code move themeColor and viewport option to viewport export:

export const viewport: Viewport = {
  themeColor: '#996c254d',
  width: '1024'
}

those 2 meta field rendered to the html, but getting "viewport" is not a valid Next.js entry export value error message in vscode.

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Home Single Language
Binaries:
  Node: 18.18.2
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.0.1-canary.1
  eslint-config-next: 14.0.1-canary.1
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

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

ESLint (eslint-config-next), Metadata (metadata, generateMetadata, next/head)

Additional context

No response

About this issue

Original URL
State: closed
Created 8 months ago
Reactions: 4
Comments: 24 (4 by maintainers)

Commits related to this issue

Support viewport export via TS Plugin (#57554) ### What? The Next.js TS Plugin generally supports the named exports for the pages and layouts. Currently the TS Plugin doesn't support the new viewp... — committed to vercel/next.js by Vinlock 8 months ago

Most upvoted comments

@Senbonzakura1234 Try checking out the Codemods guide to migrate your Next JS 13 code for Next JS 14

https://nextjs.org/docs/app/building-your-application/upgrading/codemods#use-viewport-export

+12

0xJohnnie on Oct 29, 2023

Me too. Same error.

wansaleh on Oct 29, 2023

“viewport” is not a valid Next.js entry export value

For those experiencing this in VS Code after updating to the latest Next.js version (14.0.2 in my case), try restarting the TS server:

erikjung on Nov 10, 2023

I found a temporary fix (Incase you are in the unfixed version of Next JS). Just export viewport after initialization.

const viewport: Viewport = {
  colorScheme: 'light',
  themeColor: '#ffffff',
  width: 'device-width',
  initialScale: 1,
};

// Exporting this way to avoid NextJs 14 type error
export { viewport };

Cypherball on Nov 1, 2023

You guys are lucky, in my case it does not even recognize metadata-to-viewport-export as codemod script
npx @next/codemod@latest metadata-to-viewport-export .
Invalid transform choice, pick one of:

Hi, the same problem, my one does not recognize metadata-to-viewport-export as codemod script too. Any solutions so far?

Invalid transform choice, pick one of:
- name-default-component
- add-missing-react-import
- withamp-to-config
- url-to-withrouter
- cra-to-next
- new-link
- next-image-to-legacy-image
- next-image-experimental
- built-in-next-font

rookasrudzianskas on Oct 30, 2023

Same error.

mtr1990 on Oct 29, 2023

I don’t think this issue is already solved.

As I mentioned in the pull request, the issue still exists in the canary version that includes the fix.

davegomez on Oct 30, 2023