Menu
Hi I know this is probably a stupid question but what does this error mean in relation to my app.js file? It didn't appear until I ran my local server. Was working fine prior.
Error: Helmet expects a string as a child of <head>. Did you forget to wrap your children in braces? ( <head>{``}</head> ) Refer to our API for more information.
App.js:ReactDOM.render(<App/>,document.getElementById('root'));
Is it pointing to the pages I've made and an improper Helmet element? I've been browsing through the code trying to figure this one out. Any help or insight is appreciated.
import React from "react";
import {Link} from "react-router-dom";
import { Helmet } from 'react-helmet';
import {Carousel} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import slide1 from "../images/websliders1.png";
import slide2 from "../images/websliders2.png";
import slide3 from "../images/websliders3.png";
import Layout from "../components/layout";
import "../components/scss/index.scss";
const Home = () => {
return(
<div style={{ width: `100%`, marginBottom: `0`, height:'auto', overflow:'hidden', zIndex:'1'}}>
<Layout>
<Helmet>
<head>
<title> Home | BradGradGraphics</title>
<meta property="og:description" content="Freelancing service that offers graphic design, illustration, and some small web design work digitally" />
<meta property="og:url" content="https://bradgrad.graphics" />
<meta property="og:type" content="website" />
<meta property="og:title" content="BradGradGraphics" />
<meta property="og:image" content="../images/SplashPgConc.png" />
</head>
</Helmet>
<Carousel >
<Carousel.Item>
<Link to='/gallery'>
<img className="d-block w-100 img-responsive"
src={slide1}
alt="First Slide"
/>
<Carousel.Caption>
<h1 style={{color:'black'}}>My Illustrations</h1>
<p style={{color:'black'}}>Check them out!</p>
</Carousel.Caption>
</Link>
</Carousel.Item>
<Carousel.Item>
<a href='https://blog.bradgrad.graphics/'>
<img className="d-block w-100"
src={slide2}
alt="Second Slide"
/>
<Carousel.Caption>
<h1 style={{color:'black'}}>Blog</h1>
<p style={{color:'black'}}>Give it a read!</p>
</Carousel.Caption>
</a>
</Carousel.Item>
<Carousel.Item>
{/* <Link to='#'> */}
<img className="d-block w-100"
src={slide3}
alt="Third Slide"
/>
<Carousel.Caption>
<h1 style={{color:'black'}}>Comics Incoming!</h1>
<p style={{color:'black'}}>Stay Tuned!</p>
</Carousel.Caption>
{/* </Link> */}
</Carousel.Item>
</Carousel>
</Layout>
</div>
);
};
export default Home;
395
asked Oct 15 '25 09:10
You don't need to have a <head> inside your <Helmet> as it already did for you
So remove the <head> tag:
<Helmet>
<title> Home | BradGradGraphics</title>
<meta
property="og:description"
content="Freelancing service that offers graphic design, illustration, and some small web design work digitally"
/>
<meta property="og:url" content="https://bradgrad.graphics" />
<meta property="og:type" content="website" />
<meta property="og:title" content="BradGradGraphics" />
<meta property="og:image" content="../images/SplashPgConc.png" />
</Helmet>;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
