next.js: _document -> makeStylesheetInert -> "Cannot read property 'type' of null" if Child is null

What version of Next.js are you using?

10.2.0

What version of Node.js are you using?

14.16.0

What browser are you using?

All

What operating system are you using?

Windows

How are you deploying your application?

Other platform

Describe the Bug

When a Child of the Head is null an exception is thrown: TypeError: Cannot read property 'type' of null.

In the condition a nullsafe is missing

https://github.com/vercel/next.js/blob/cf4ba8d7051a4fc47647b7c7bc3b7f4b45de41eb/packages/next/pages/_document.tsx#L331

Expected Behavior

if (c && c.type === 'link' &&
        c.props['href'] &&
        OPTIMIZED_FONT_PROVIDERS.some((url) => c.props['href'].startsWith(url))
      )

To Reproduce

In the _document put a null component inside the Head.

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

const NullComponent = () => null;

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head>
            <NullComponent />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 1
Comments: 15 (9 by maintainers)

Commits related to this issue

Removng prop writable checking in prod (#31929) x-ref: #28498, #31784 I can repro the issue #24783 with `next-boost` 0.10.1 and it was fixed in 0.10.2 (ref: https://github.com/rjyo/next-boost/commit... — committed to vercel/next.js by huozhi 3 years ago

Most upvoted comments

This is a bug, it’s related to the new font optimization (which only runs during build).

timneutkens on May 6, 2021

I’m also experiencing a similar problem: Node.js: 14.16.0 Next.js: 10.2.0

Error message: TypeError: Cannot assign to read only property 'children' of object '#<Object>'

But in my case, this is the line inside the _document.tsx’s <Head> that triggers the problem:

<style>{`#__next { height: 100%; }`}</style>

It wasn’t failing in Next.js 10.0.6.

fbudassi on May 6, 2021

Our project suddenly started returning 500s in production because of TypeError: Cannot assign to read only property 'children' of object '#<Object>'.

I’ve created a project where I’ve reproduced the issue (https://github.com/atdrago/repro-24783). Here’s the commit where the issue is introduced: https://github.com/atdrago/repro-24783/commit/1ea71f6e8bf8c420b8e0b521a30b3ef6d6592371

Steps to reproduce:

npm i && npm run build && npm start
Navigate to http://localhost:3000/foo/bar (/foo/bar isn’t special, it can be /foo/anything-here)
Observe the 500 error

Some things I noticed:

The problem is caused by these lines: https://github.com/atdrago/repro-24783/blob/1ea71f6e8bf8c420b8e0b521a30b3ef6d6592371/pages/_document.tsx#L21-L26
It is only reproducible using next-boost
It is only reproducible using getStaticPaths and navigating to a route that is not caught by the paths array, and does not 404
It is only reproducible if getStaticPaths returns a fallback value of true or 'blocking' (since false would 404)

Node.js: 14.15.0 Next.js: 11.0.1

Please let me know if you have any questions, and thank you for your time and effort looking into this issue!

I’ve created a related issue on next-boost here: https://github.com/rjyo/next-boost/issues/42

atdrago on Jun 24, 2021