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.

Next/Head - return null for conditional head scripts

See original GitHub issue

Feature request

When using next/head in a page we should be able to render head scripts conditionally by returning null from a custom component.

Is your feature request related to a problem? Please describe.

If a custom component that can return null (depending on its internal logic) is added as a child of Next/Head the page breaks.

Example:

<Head>
  <CustomComponent booleanProp={true} />
</Head>

Where CustomComponent is something like:

const CustomComponent = ({booleanProp}) => {

if(booleanProp){
  return <script>some js script</script>
}

return null;
};

The last ‘return null’ will break the page since a file called headManager.js has this logic:

  for (var i = 0, j = headCountEl.previousElementSibling; i < headCount; i++, j = j.previousElementSibling) {
    if (j.tagName.toLowerCase() === type) {
      oldTags.push(j);
    }
  }

Therefore j.tagName is undefined.

Describe the solution you’d like

I would like to be able to return null (as it’s very common in react components) when my condition is not met; this will let NextJs skip the script.

Something simple like:

    if (j.tagName && j.tagName.toLowerCase() === type) {
      oldTags.push(j);
    }

As an added bonus we can log a warning for head scripts returning null.

Describe alternatives you’ve considered

headManager.js should handle ‘null’ script tags.

Issue Analytics

State:
Created 3 years ago
Reactions:11
Comments:12 (2 by maintainers)

Top GitHub Comments

6reactions

klapeccommented, Sep 23, 2020

@lfades I’ve just gave it a try and unfortunately it still is an issue (although a different one?):

Uncaught (in promise) DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('function Analytics(_ref) {
...my component...
}') is not a valid name.
    at reactElementToDOM (webpack-internal:///./node_modules/next/dist/client/head-manager.js:20:21)
    at eval (webpack-internal:///./node_modules/next/dist/client/head-manager.js:59:18)
    at Array.forEach (<anonymous>)
    at updateElements (webpack-internal:///./node_modules/next/dist/client/head-manager.js:46:14)
    at eval (webpack-internal:///./node_modules/next/dist/client/head-manager.js:107:9)

  11 | function reactElementToDOM({ type, props }: JSX.Element): HTMLElement {
> 12 |   const el = document.createElement(type)
     |             ^
  13 |   for (const p in props) {
  14 |     if (!props.hasOwnProperty(p)) continue
  15 |     if (p === 'children' || p === 'dangerouslySetInnerHTML') continue

and here’s my <Head> component:

      <Head>
        <meta name="web" content={serverName} />
        <Analytics
          {...props}
        />
      </Head>

So now I can’t even use a custom component within <Head>, regardless of what it returns (whether a valid <head> DOM element child or a custom React component). I’m on "next": "^9.5.4-canary.20",

5reactions

made-by-jonnycommented, Nov 2, 2020

I am getting the same issue as @klapec in 10.0.0