seeing intermittent _registerComponent(...): Target container is not a DOM element. #1712

fooljulian · 2017-08-03T21:09:23Z

gatsby-version: 1.0.0-beta.5
node version: 6.1

For new users visiting our site for the first time on Chrome or Safari, we are seeing intermittent "_registerComponent(...): Target container is not a DOM element." errors with probably about 5% of the requests that come in. The issues is intermittent and not easily reproducible unfortunately, which makes me think it's a race condition. Note these are users who have never been to the site and are downloading the assets for the first time.

Here's a couple views of the stacktrace:

reactProdInvariant (commons-6c48c8bdd4c8bf1d8c68.js:89308)
_renderNewRootComponent (commons-6c48c8bdd4c8bf1d8c68.js:83683:147)
_renderSubtreeIntoContainer (commons-6c48c8bdd4c8bf1d8c68.js:83774)
(anonymous function) (app-741aa5e73befe272fc03.js:1674)
(anonymous function) (app-741aa5e73befe272fc03.js:1637)
(anonymous function) (app-741aa5e73befe272fc03.js:14966)
handler (app-741aa5e73befe272fc03.js:10940)
(anonymous function) (app-741aa5e73befe272fc03.js:10961)
webpackJsonpCallback (commons-6c48c8bdd4c8bf1d8c68.js:21)
Global Code (layout-component---index-9afd11588850f82f9d22.js:1)

Here's a simplified view of our html.jsx file:

module.exports = React.createClass({
    render() {
        let css = null;
        if (process.env.NODE_ENV === 'production') { // eslint-disable-line no-process-env
            css = (
                <style
                    id="gatsby-inlined-css"
                    dangerouslySetInnerHTML={{ __html: stylesStr }}
                />
            );
        }

        const head = Helmet.rewind();

        return (
            <html lang="en">
                <head>
                    {this.props.headComponents}
                    <meta charSet="utf-8" />
                    <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
                    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
                    {head.title.toComponent()}
                    {head.meta.toComponent()}
                    {head.link.toComponent()}
                    {css}

                </head>
                <body>
                    <div
                        id="___gatsby"
                        dangerouslySetInnerHTML={{ __html: this.props.body }}
                    />

                    {this.props.postBodyComponents}
                    }
                </body>
            </html>
        );
    }
});

Reading this issue:

https://stackoverflow.com/questions/26566317/invariant-violation-registercomponent-target-container-is-not-a-dom-elem

If I move the this.props.headComponents below the gatsby div, the issue appears to be resolved.

Is there another way I can address this? Seems not awesome to move headComponents out of head. But it does seem that the JS in the headComponents are dependent on the gatsby div being read and in the DOM.

Thanks!

module.exports = React.createClass({
    render() {
        let css = null;
        if (process.env.NODE_ENV === 'production') { // eslint-disable-line no-process-env
            css = (
                <style
                    id="gatsby-inlined-css"
                    dangerouslySetInnerHTML={{ __html: stylesStr }}
                />
            );
        }

        const head = Helmet.rewind();

        return (
            <html lang="en">
                <head>
                    <meta charSet="utf-8" />
                    <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
                    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
                    {head.title.toComponent()}
                    {head.meta.toComponent()}
                    {head.link.toComponent()}
                    {css}

                </head>
                <body>
                    <div
                        id="___gatsby"
                        dangerouslySetInnerHTML={{ __html: this.props.body }}
                    />
                    {this.props.headComponents}
                    {this.props.postBodyComponents}
                    }
                </body>
            </html>
        );
    }
});

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

KyleAMathews · 2017-08-05T02:26:48Z

Saw this recently with a client who had a blocking script tag between headComponents and <body>.

Which we could educate people not to do but probably better to go with a more full-proof method of putting loading scripts after <body> is created…

To do this all we'd need to do is change this from headComponents to postBodyComponents

gatsby/packages/gatsby/src/cache-dir/static-entry.js

Line 179 in 52e36b9

headComponents.push(

It used to be below the body but moved it to the head for a bit of a speed boost on TTI. But given it can cause trouble and we're already using <link preload>, which the next version of Safari supports as well as a coming version of Firefox, I think we're safe moving things back below the <body>.

Want to add a PR?

timarney · 2017-09-15T21:33:38Z

I'm seeing Minified React error #32; only in prod on https://reactfaq.site

Git repo here https://github.com/timarney/react-faq

Looks like in my case when I add the Third Party docsearch.js script for the search before the tag I'm getting the error. I'm adding that script via Netlify (Post processing)

KyleAMathews added a commit that referenced this issue Aug 14, 2017

Add domready to ensure dom ready before trying to render fixes #1712

195bde8

KyleAMathews closed this as completed in 6ee4b74 Aug 14, 2017

jsardev mentioned this issue Aug 19, 2017

Minified React error #37 on Production only #1859

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

seeing intermittent _registerComponent(...): Target container is not a DOM element. #1712

seeing intermittent _registerComponent(...): Target container is not a DOM element. #1712

fooljulian commented Aug 3, 2017

KyleAMathews commented Aug 5, 2017

timarney commented Sep 15, 2017 •

edited

seeing intermittent _registerComponent(...): Target container is not a DOM element. #1712

seeing intermittent _registerComponent(...): Target container is not a DOM element. #1712

Comments

fooljulian commented Aug 3, 2017

KyleAMathews commented Aug 5, 2017

timarney commented Sep 15, 2017 • edited

timarney commented Sep 15, 2017 •

edited