Helmet of child component overwrites Helmet in Parent (different field)

[geyang]

@cwelch5

Hey Chris, Thanks for this useful library!

I am a bit confused about the expected behavior for multiple Helmet nodes in the app. suppose for the Page component I have

class App extends Component {
    render() {
        return (
            <Fragment>
                <Helmet>
                    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"/>
                    <style>{"html, body, #root {height: 100%; width: 100%; margin: 0;}"}</style>
                </Helmet>
                <Switch>
                    <Route exact path="/" component={FrontPage}/>
                    <Route exact strict path="/blog" component={() => <Redirect to="/blog/"/>}/>
                    <Route exact path="/blog/" component={Blog}/>
                    <Route exact path="/blog/:postId" component={Post}/>
                </Switch>
            </Fragment>
        );
    }
}

and then in a child page I have

export default function Post(props) {
    const {location: {pathname}} = props;
    const {title, snippet, markdown} = postData[pathname];
    return (
        <Page>
            <FlexItem fluid component={RowContainer} align="stretch" style={{overflowY: "auto"}}>
                <Helmet>
                      <meta property="og:url" content={props.url}/>
                      <meta property="og:title" content={props.title}/>
                      <meta property="og:description" content={props.description || props.title}/>
                      <meta property="og:image" content={props.image}/>
                      <meta name="twitter:card" content={props.image}/>
                      <title>{props.title}</title>
                </Helmet>
                <Flex column justify="flex-start">
                    <article>{markdown}</article>
                    <FlexSpacer/>
                </Flex>
            </FlexItem>
        </Page>
    );
}

Does this Post component's Helmet overwrite the App Helmet completely? Notice that the fields are different: The child component writes to title, meta but does not write style or script.

Expected Behavior

I was expecting fields such as script and style gets appended to the header, while title gets replaced b/c there should only be one.

What Happens Here

Here the parent script and style tags are gone.

[lilbumblebear]

I was having this issue as well, after digging into it for a while I went back to this:

Note: Use the same instance

I was using a common component that exists in a separate directory. After adding an alias in the webpack config all worked as expected!

I am using version 6.0.0-beta

[josuearrieta]

@lilbumblebear would you mind sharing your webpack config? Having the same issue here!