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

emplums · 2018-06-20T23:24:03Z

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>

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

jxnblk · 2018-06-21T15:06:14Z

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 · 2018-06-21T16:33:48Z

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>
)

jxnblk · 2018-06-21T20:59:52Z

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

emplums commented Jun 20, 2018

jxnblk commented Jun 21, 2018

emplums commented Jun 21, 2018

jxnblk commented Jun 21, 2018

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

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

Comments

emplums commented Jun 20, 2018

jxnblk commented Jun 21, 2018

emplums commented Jun 21, 2018

jxnblk commented Jun 21, 2018