Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adding viewport meta tag to custom Document results in Next.js logging a warning #99

Closed
owanhunte opened this issue Sep 10, 2020 · 3 comments
Closed

Adding viewport meta tag to custom Document results in Next.js logging a warning #99

owanhunte opened this issue Sep 10, 2020 · 3 comments
Labels
bug Something isn't working

Comments

@owanhunte
Copy link

owanhunte commented Sep 10, 2020 •
edited
Loading

Summary

The instructions in Step 3: Add Head Meta (Example) of the README suggest adding the various meta and link tags to a custom Document component (_document.js / _document.tsx), including the viewport meta tag. The examples also follow these instructions by having the viewport meta tag in custom _document.js.

<meta name='viewport' content='minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, user-scalable=no, viewport-fit=cover' />

This will however result in the following warning being raised by the latest version of Next.js:

Warning: viewport meta tags should not be used in _document.js's <Head>. https://err.sh/next.js/no-document-viewport-meta

Following the link provided in the warning gives further details, specifically it advises:

Adding <meta name="viewport" ...> in pages/_document.js will lead to unexpected results since it cannot be deduped. The viewport tag should be handled by next/head in pages/_app.js.

I should make it clear that this is therefore not an issue with next-pwa, just an issue with where the next-pwa documentation says we should place the viewport meta tag. As such my steps to reproduce and my reproduce setup repo will exclude next-pwa in the setup altogether.

How To Reproduce

Steps to reproduce the behavior:

  1. Setup a minimal Next.js app: yarn create next-app
  2. Create a pages/_document.js file and add the following code to it:
import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <meta
            name="viewport"
            content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, user-scalable=no, viewport-fit=cover"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;
  1. Start the Next.js development server: yarn dev
  2. Open http://localhost:3000 in your browser
  3. See the warning generated in the server console (i.e. terminal, command prompt, PowerShell, etc).

Link to minimal reproduce setup repository if any: https://github.com/owanhunte/next-pwa-viewport-meta

Expected Behaviors

No warning should have been generated if the suggested placement of the viewport meta tag was compatible with the Next.js environment.

Screenshots

If applicable, add screenshots to help explain your problem.

Additional Context

The page linked to in the warning states how to fix the warning. Simply set your viewport meta tag in pages/_app.js instead, like so:

import Head from "next/head";
import "../styles/globals.css";

function MyApp({Component, pageProps}) {
  return (
    <>
      <Head>
        <meta
          name="viewport"
          content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, user-scalable=no, viewport-fit=cover"
        />
      </Head>
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

So next-pwa's README and examples need to be updated accordingly. I'm deep in code at the moment with a couple projects so if someone else is willing to create a PR that would be great. If I get some free time and one hasn't been made yet then I would see if I can make one.
@owanhunte owanhunte added the bug Something isn't working label Sep 10, 2020
@shadowwalker
Copy link
Owner

I will update that

@owanhunte
Copy link
Author

I will update that

OK great.

@shadowwalker
Copy link
Owner

Updated

@xiaotiandada xiaotiandada mentioned this issue Apr 22, 2022
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@owanhunte @shadowwalker