_document -> makeStylesheetInert -> "Cannot read property 'type' of null" if Child is null #24783

pecoram · 2021-05-04T14:37:04Z

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

next.js/packages/next/pages/_document.tsx

Line 331 in cf4ba8d

c.type === 'link' &&

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

The text was updated successfully, but these errors were encountered:

ljosberinn · 2021-05-05T08:08:45Z

Can you elaborate why you're rendering a NullComponent in Head? Head should contain regular head-elements such as link, script, meta, not nothing.

pecoram · 2021-05-05T09:26:34Z

for example when you write something like that:

{ condition && <link rel="preload" as="image" href="" /> }
or

const Component = () => <link rel="preload" as="image" href="" />;
{ condition && <Component /> }

if condition is false you get the error!

pecoram · 2021-05-05T09:31:28Z

now I solved it this way:

{condition ? <Component /> : ('')}

but a nullsafe in that point is a better and safer solution!

ljosberinn · 2021-05-05T14:06:14Z

agreed, I'll try to PR this later today

synoptase · 2021-05-05T15:25:35Z

EDIT:
My code was wrapping a <><link /></> with a fragment, therefore being read only. Fixed my issue.

Still a bit related to the original issue. accessing props maybe needs more sanity checks? (nullsafe, readonly...)

EDIT#2:
Seems env related, not a bug for me. (#24783 (comment))

I'm having a somewhat similar issue: TypeError: Cannot assign to read only property 'children' of object '#<Object>'
Traced back to:

next.js/packages/next/pages/_document.tsx

Line 340 in cf4ba8d

c.props['children'] = this.makeStylesheetInert(c.props['children'])

nextjs 10.2.0
node 12.22.1

Still trying to figure out the root cause though.

ljosberinn · 2021-05-05T21:03:49Z

@pecoram could you try to create a reproducible repo?

Both

import Head from "next/head";

export default function Test() {
  return (
    <>
      <Head>{false && <link rel="preload" as="image" href="" />}</Head>
      <h1>hi</h1>
    </>
  );
}

and

import Head from "next/head";

export default function Test() {
  return (
    <>
      <Head>{null}</Head>
      <h1>hi</h1>
    </>
  );
}

work flawlessly for me

@synoptase same for you please,

import Head from "next/head";

export default function Test() {
  return (
    <>
      <Head>
        {/* // eslint-disable-next-line react/jsx-no-useless-fragment */}
        <>{null}</>
      </Head>
      <h1>hi</h1>
    </>
  );
}

works fine too

synoptase · 2021-05-06T07:53:19Z

@ljosberinn it worked indeed in my dev env. But once build and deployed, error kept appearing until i removed Fragment. It definitely seems related to the build env, but i just tried reproducing the issue by building and running my docker image locally, without any luck.

Not a bug as initially reported by my first comment then.

timneutkens · 2021-05-06T09:41:14Z

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

ljosberinn · 2021-05-06T11:19:30Z

I believe changing the implementation of _document.makeStylesheetInert to this should fix it but haven't found a way to test it integratively:

  makeStylesheetInert(node: ReactNode): ReactNode[] {
    return React.Children.map(node, (child) => {
      if (!React.isValidElement(child)) {
        return null
      }

      if (
        child.type === 'link' &&
        child.props.href &&
        OPTIMIZED_FONT_PROVIDERS.some((url) => child.props.href.startsWith(url))
      ) {
        return React.cloneElement(child, {
          ...child.props,
          'data-href': child.props.href,
          href: undefined,
        })
      }

      if (child.props?.children) {
        return React.cloneElement(child, {
          ...child.props,
          children: this.makeStylesheetInert(child.props.children),
        })
      }

      return child
    })
  }

fbudassi · 2021-05-06T23:28:27Z

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.

janicklas-ralph · 2021-05-21T23:55:08Z

I'm having a hard time reproducing this bug. We also already check for this edge case

Could you make a small example where the error is reproducible?

flybayer · 2021-06-03T19:28:45Z

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

Maybe there's two bugs here, but I get this error message with NODE_ENV=test next build which is this bug: #25491

atdrago · 2021-06-24T14:14:34Z

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: atdrago/repro-24783@1ea71f6

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: next-boost/next-boost#42

huozhi · 2021-11-29T16:14:25Z

It's fixed in next-boost itself in v0.10.2.

@styfle

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: next-boost/next-boost@eba6d10). The actual case is missing setting node env to `"production"`. React freeze element props and element itself in dev mode (ref: https://github.com/facebook/react/blob/a724a3b578dce77d427bef313102a4d0e978d9b4/packages/react/src/ReactElement.js#L194-L196) Then next.js will reassign props with react development bundle while next-boost is enabled. Those operations are only happened in non-dev mode so it's good to remove now. This PR + #31898 == revert #31784 cc @styfle @awareness481

balazsorban44 · 2022-01-27T06:06:24Z

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

pecoram added the bug Issue was opened via the bug report template. label May 4, 2021

timneutkens added kind: bug and removed bug Issue was opened via the bug report template. labels May 6, 2021

timneutkens assigned janicklas-ralph May 6, 2021

timneutkens added this to the Iteration 20 milestone May 6, 2021

timneutkens modified the milestones: Iteration 20, Iteration 21 May 22, 2021

timneutkens added the please add a complete reproduction The issue lacks information for further investigation label May 23, 2021

timneutkens modified the milestones: Iteration 21, Iteration 22 Jun 21, 2021

atdrago mentioned this issue Jun 24, 2021

TypeError: Cannot assign to read only property 'children' of object '#<Object>' next-boost/next-boost#42

Closed

timneutkens modified the milestones: Iteration 22, Iteration 23 Jun 28, 2021

awareness481 mentioned this issue Aug 25, 2021

Fix: Cannot assign to read only property 'children' #28498

Closed

3 tasks

tills13 mentioned this issue Sep 20, 2021

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

Closed

styfle modified the milestones: 11.1.x, 12.0.4 Nov 5, 2021

timneutkens added the Font (next/font) Related to Next.js Font Optimization. label Nov 16, 2021

timneutkens removed this from the 12.0.5 milestone Nov 17, 2021

awareness481 mentioned this issue Nov 29, 2021

Remove unpurpose test #31898

Merged

huozhi closed this as completed Nov 29, 2021

huozhi mentioned this issue Nov 29, 2021

Removng prop writable checking in prod #31929

Merged

vercel locked as resolved and limited conversation to collaborators Jan 27, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

_document -> makeStylesheetInert -> "Cannot read property 'type' of null" if Child is null #24783

_document -> makeStylesheetInert -> "Cannot read property 'type' of null" if Child is null #24783

pecoram commented May 4, 2021 •

edited

Loading

ljosberinn commented May 5, 2021

pecoram commented May 5, 2021 •

edited

Loading

pecoram commented May 5, 2021 •

edited

Loading

ljosberinn commented May 5, 2021

synoptase commented May 5, 2021 •

edited

Loading

ljosberinn commented May 5, 2021 •

edited

Loading

synoptase commented May 6, 2021 •

edited

Loading

timneutkens commented May 6, 2021

ljosberinn commented May 6, 2021

fbudassi commented May 6, 2021 •

edited

Loading

janicklas-ralph commented May 21, 2021

flybayer commented Jun 3, 2021

atdrago commented Jun 24, 2021 •

edited

Loading

huozhi commented Nov 29, 2021

balazsorban44 commented Jan 27, 2022

_document -> makeStylesheetInert -> "Cannot read property 'type' of null" if Child is null #24783

_document -> makeStylesheetInert -> "Cannot read property 'type' of null" if Child is null #24783

Comments

pecoram commented May 4, 2021 • edited Loading

What version of Next.js are you using?

What version of Node.js are you using?

What browser are you using?

What operating system are you using?

How are you deploying your application?

Describe the Bug

Expected Behavior

To Reproduce

ljosberinn commented May 5, 2021

pecoram commented May 5, 2021 • edited Loading

pecoram commented May 5, 2021 • edited Loading

ljosberinn commented May 5, 2021

synoptase commented May 5, 2021 • edited Loading

ljosberinn commented May 5, 2021 • edited Loading

synoptase commented May 6, 2021 • edited Loading

timneutkens commented May 6, 2021

ljosberinn commented May 6, 2021

fbudassi commented May 6, 2021 • edited Loading

janicklas-ralph commented May 21, 2021

flybayer commented Jun 3, 2021

atdrago commented Jun 24, 2021 • edited Loading

huozhi commented Nov 29, 2021

balazsorban44 commented Jan 27, 2022

pecoram commented May 4, 2021 •

edited

Loading

pecoram commented May 5, 2021 •

edited

Loading

pecoram commented May 5, 2021 •

edited

Loading

synoptase commented May 5, 2021 •

edited

Loading

ljosberinn commented May 5, 2021 •

edited

Loading

synoptase commented May 6, 2021 •

edited

Loading

fbudassi commented May 6, 2021 •

edited

Loading

atdrago commented Jun 24, 2021 •

edited

Loading