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

Custom _document not working as expected when using experimental-edge runtime #40440

Open
1 task done
fasetto opened this issue Sep 11, 2022 · 2 comments
Open
1 task done

Custom _document not working as expected when using experimental-edge runtime #40440

fasetto opened this issue Sep 11, 2022 · 2 comments
Labels
bug Issue was opened via the bug report template.

Comments

@fasetto
Copy link

fasetto commented Sep 11, 2022

Verify canary release

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

Provide environment information

  npm: 8.11.0
  Yarn: 1.22.19
  pnpm: 7.11.0
Relevant packages:
  next: 12.3.0
  eslint-config-next: 12.2.5
  react: 18.2.0
  react-dom: 18.2.0

warn - Latest canary version not detected, detected: "12.3.0", newest: "12.3.1-canary.0".
Please try the latest canary version (npm install next@canary) to confirm the issue still exists before creating a new issue.
Read more - https://nextjs.org/docs/messages/opening-an-issue

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

I'm using custom _document to change the body styles. But the classname is not applied when I checked. Also link and meta tags are not applied too.

My next.config.js looks like this;

/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ["ts", "tsx"],
  reactStrictMode: true,
  swcMinify: true,
  experimental: {
    runtime: "experimental-edge",
  },
};

module.exports = nextConfig;

When I removed the experimental stuff, it works as expected.

import NextDocument, { Head, Html, Main, NextScript } from "next/document";

class Document extends NextDocument {
  render() {
    return (
      <Html>
        <Head>
          <link
            rel="preload"
            href="/fonts/inter-var-latin.woff2"
            as="font"
            type="font/woff2"
            crossOrigin="anonymous"
          />
          <link rel="icon" href="/favicon.ico" />
          <meta content="#ffffff" name="theme-color" />
          <meta content="#ffffff" name="msapplication-TileColor" />
        </Head>

        <body className="font-sans">
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default Document;

Expected Behavior

Class names and everything inside the tag must be applied to the dom.

Link to reproduction

https://codesandbox.io/s/intelligent-swartz-qphdm6?file=/pages/_document.tsx

To Reproduce

  • Go to the reproduction link.
  • Open the devtools
  • Check the classname for the body.
@fasetto fasetto added the bug Issue was opened via the bug report template. label Sep 11, 2022
@balazsorban44
Copy link
Member

Seems to be the case only for the class version of Document.

This renders correctly 🤔:

import { Head, Html, Main, NextScript } from "next/document"

export default function Document() {
  return (
    <Html>
      <Head>
        <link
          rel="preload"
          href="/fonts/inter-var-latin.woff2"
          as="font"
          type="font/woff2"
          crossOrigin="anonymous"
        />
        <link rel="icon" href="/favicon.ico" />
        <meta content="#ffffff" name="theme-color" />
        <meta content="#ffffff" name="msapplication-TileColor" />
      </Head>

      <body className="font-sans">
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

@dodrian dodrian mentioned this issue Apr 10, 2023
Closed
@kzlar
Copy link

kzlar commented Oct 16, 2023

I see the same issue. @balazsorban44's version indeed work, but then when trying to use getInitialProps results in the following error:

[Error: `getInitialProps` in Document component is not supported with the Edge Runtime.]

Which isn't really documented (as far as I could find at least). Is there an alternative with the pages router?

This was referenced Jan 5, 2024
Merged
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 Issue was opened via the bug report template.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@balazsorban44 @fasetto @kzlar