Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug] Usage of Head component results in ‘Maximum call stack exceeded’

See original GitHub issue

Environment

  System:
    OS: macOS 10.14.4
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Memory: 18.74 MB / 16.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 8.11.3 - ~/.nvm/versions/node/v8.11.3/bin/node
    Yarn: 1.15.2 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v8.11.3/bin/npm
  Browsers:
    Chrome: 73.0.3683.103
  npmPackages:
    react: ^16.8.2 => 16.8.6 
    react-dom: ^16.8.2 => 16.8.6 
    react-static: ^7.0.7 => 7.0.7 
    react-static-plugin-reach-router: ^7.0.0 => 7.0.0 
    react-static-plugin-scss-modules: ^1.0.3 => 1.0.3 
    react-static-plugin-sitemap: ^7.0.0 => 7.0.0 
    react-static-plugin-source-filesystem: ^7.0.0 => 7.0.0

Steps to Reproduce the problem

react-static create --name test --template basic
Edit about.js by adding the following:

  // about.js
  import React from 'react'
+ import { Head } from 'react-static'

  export default () => (
    <div>
+     <Head>
+       <title>Test</title>
+     </Head>
      <p>React Static is a progressive static site generator for React.</p>
    </div>
  )

yarn start
Open the app in the browser
Click on About in the nav
The About page is opened, title updated to Test
Click on About again
Behold the RangeError: Maximum call stack size exceeded

Expected Behavior

No error.

Issue Analytics

State:
Created 4 years ago
Reactions:2
Comments:8 (5 by maintainers)

Top GitHub Comments

1reaction

Cinamonascommented, Jun 4, 2019

@kirklikecaptain, this issue will be automatically closed once #1175 is merged. But until then, simply running yarn upgrade should do the trick.

1reaction

Cinamonascommented, Apr 19, 2019

I did some digging and found that this is React Helmet’s issue: https://github.com/nfl/react-helmet/issues/373. Allegedly fixed in v6.0.0-beta, but it hasn’t moved from beta since.

A workaround is to use props instead of children:

 <Head
+  title="About"
+  meta={[
+    {
+      name: 'description',
+      content: 'Learn more about us',
+    },
+  ]}
 >
-  <title>About</title>
-  <meta name="description" content="Learn more about us" />
 </Head>

Interestingly, following the exact same steps to reproduce with React-Static v6, doesn’t result in this issue. And I didn’t have this issue with v5. So it means that some changes in v7 surfaced it. Will need to keep digging ⛏️