Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
emplums opened this issue Jun 20, 2018 · 3 comments

Comments

@emplums
Copy link

emplums commented Jun 20, 2018

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>
@jxnblk
Copy link
Member

jxnblk commented Jun 21, 2018

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
Copy link
Author

emplums commented Jun 21, 2018

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
Copy link
Member

jxnblk commented Jun 21, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants