Hey 👋 We're using the configurable <he

Configuring <head> content in x0 config creates multiple <head> tags in static build about x0 HOT 3 OPEN

c8r commented on July 21, 2024

Configuring content in x0 config creates multiple tags in static build

from x0.

Comments (3)

jxnblk commented on July 21, 2024

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

from x0.

emplums commented on July 21, 2024

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

from x0.

jxnblk commented on July 21, 2024

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

from x0.

Configuring <head> content in x0 config creates multiple <head> tags in static build about x0 HOT 3 OPEN

Comments (3)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent