Configuring <head> content in x0 config creates multiple <head> tags in static build

Question

Configuring <head> content in x0 config creates multiple <head> tags in static build

emplums opened this issue 6 years ago · comments

Hey 👋

We're using the configurable <head> content feature to link to our CSS builds and change the <meta> tags like so:

"x0": {
    "title": "primer-react",
    "cssLibrary": "styled-components",
    "basename": "/",
    "meta": [
      {
        "name": "og:title",
        "content": "Primer React"
      },
      {
        "name": "description",
        "content": "Primer components built with React.js."
      }
    ],
    "links": [
      {
        "rel": "stylesheet",
        "href": "https://unpkg.com/primer-buttons/build/build.css"
      }
      {... more links here}
    ]
}

This is working as expected locally, but the static builds contain two <head> tags, the correct one nested under a <div id='root'>. When deployed the second <head> tag gets stripped out and none of our styles appear.

Here's what the static build in the build folder's index.html looks like:

<!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="generator" content="Compositor x0">
  <title>primer-react</title>
  <style>*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif}</style>
 </head>
 <div id="root">
  <head>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <meta name="generator" content="Compositor X0">
   <link rel="stylesheet" href="https://unpkg.com/primer-buttons/build/build.css">
   [... more links]
   <meta name="og:title" content="Primer React">
   <meta name="description" content="Primer components built with React.js.">
   <style>[... some styles here]
  </head>

Brent Jackson · Answer 1 · Thu Jun 21 2018 23:06:14 GMT+0800 (China Standard Time)

Thanks for reporting this! We dug into this a little bit but couldn't reproduce on our end. By the looks of this, I suspect it might be something related to the way v4 worked (i.e. attempting to render to the root document).

Could you try clearing out your build folder and checking to see if the components in your current setup are doing this? It could also be helpful to have an example of what you have in the component that you're rendering and in the _app.js file, if that's being used

emplums · Answer 2 · Fri Jun 22 2018 00:33:48 GMT+0800 (China Standard Time)

Of course! I forgot to mention also that we are running version 5.0.8. FWIW I ended up just adding a <head> with all the information we needed into _app.js and that seems to be working fine as a work around. I'll still post our _app.js and Index component here in case anyone else runs into this in the future!

Here's what our _app.js file looked like:

import CSS from './CSS'
import React from 'react'
import Index from './docs'

// Generic page wrapper component
const Page = ({ render }) => (
  <React.Fragment>
    <head>
    <CSS />
    <div className='text-dark-gray'>
      <Index />
    </div>
  </React.Fragment>
)

export default Page

And here's that Index component:

const Index = props => (
  <div>
    <nav className='UnderlineNav'>
      <div className='UnderlineNav-body'>
        <NavLink to='/docs/primer-react' className='UnderlineNav-item no-underline' activeClassName='selected'>primer-react</NavLink>
        <NavLink to='/docs/demos' className='UnderlineNav-item no-underline' activeClassName='selected'>Demos</NavLink>
        <NavLink to='/docs/sandbox' className='UnderlineNav-item no-underline' activeClassName='selected'>Sandbox</NavLink>
      </div>
    </nav>
    <Route path='/docs/demos' component={DemoPage} />
    <Route path='/docs/primer-react' component={ComponentPage} />
    <Route path='/docs/sandbox' component={Sandbox} />
  </div>
)

Brent Jackson · Answer 3 · Fri Jun 22 2018 04:59:52 GMT+0800 (China Standard Time)

Thanks! I'm not seeing anything that looks like it'd be duplicating the <head> in the index.js file. And just to double check the filename is (lowercased) index.js, right?

Generally I'd suggest not putting a <head> element in the components with the way v5 is setup. The app renders to the root div here with the default template: https://github.com/c8r/x0/blob/master/lib/template.js#L23 I would like to add support for a <Head /> component that could be used like the example above, but we don't have that feature yet.

FWIW, another alternative to adding head options in the package.json is to supply a custom template