Mixing
GatsbyJS Layout.js returns error unexpected token
0
I am building a GatsbyJS website and created the layout.js, index.js with some static data and am trying to compile it but it does not compile. The code from layout.js and the error message are below.
import React from 'react'
import PropTypes from 'prop-types'
import Helmet from 'react-helmet'
import { StaticQuery, graphql } from 'gatsby'
import Header from './header'
import './theme.css'
const Layout = ({ children }) => (
<StaticQuery
query={graphql`
query SiteTitleQuery {
site {
siteMetadata {
title
}
}
}
`}
render={data => (
<Helmet
title={data.site.siteMetadata.title}
meta={[
{ name: 'description', content: 'Sample' },
{ name: 'keywords', content: 'sample, something' },
]}
>
<html lang="en" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.ico"/>
// Font icon
<link href="assets/css/plugin/font-awesome.min.css" rel="stylesheet" type="text/css" />
// CSS Global
<link href="../../assets/css/plugin/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="../../assets/css/plugin/bootstrap-select.min.css" rel="stylesheet" type="text/css" />
<link href="../../assets/css/plugin/owl.carousel.css" rel="stylesheet" type="text/css" />
<link href="../../assets/css/plugin/animate.css" rel="stylesheet" type="text/css" />
<link href="../../assets/css/plugin/subscribe-better.css" rel="stylesheet" type="text/css" />
// Custom CSS
<link href="../../assets/css/theme.css" rel="stylesheet" type="text/css" />
// Custom JS
<script src="../../assets/js/theme.js"></script>
<script src="../../assets/js/plugin/jquery-2.2.4.min.js"></script>
<script src="../../assets/js/plugin/bootstrap.min.js"></script>
<script src="../../assets/js/plugin/bootstrap-select.min.js"></script>
<script src="../../assets/js/plugin/owl.carousel.min.js"></script>
<script src="../../assets/js/plugin/jquery.plugin.min.js"></script>
<script src="../../assets/js/plugin/jquery.countdown.js"></script>
<script src="../../assets/js/plugin/isotope.js"></script>
<script src="../../assets/js/plugin/jquery.subscribe-better.min.js"></script>
<Helmet/>
<Header siteTitle={data.site.siteMetadata.title} class="main-header"/>
<div
style={{
margin: '0 auto',
maxWidth: 960,
padding: '0px 1.0875rem 1.45rem',
paddingTop: 0,
}}
>
{children}
</div>
)}
/>
)
Layout.propTypes = {
children: PropTypes.node.isRequired,
}
export default Layout
It returns the error:
/home/ec2-user/environment/bestpet-v1/src/components/layout.js
77:11 error Parsing error: Unexpected token, expected "}"
75 |
76 | Layout.propTypes = {
> 77 | children: PropTypes.node.isRequired,
| ^
78 | }
79 |
80 | export default Layout
It does not compile at all. I checked all the brackets and closing tags but apparently I'm missing something.
What am I doing wrong?
reactjs gatsby
edited Nov 20 '18 at 5:45
kit
1,1063716
asked Nov 19 '18 at 19:24
user1305579user1305579
328
add a comment |
0
I am building a GatsbyJS website and created the layout.js, index.js with some static data and am trying to compile it but it does not compile. The code from layout.js and the error message are below.
import React from 'react'
import PropTypes from 'prop-types'
import Helmet from 'react-helmet'
import { StaticQuery, graphql } from 'gatsby'
import Header from './header'
import './theme.css'
const Layout = ({ children }) => (
<StaticQuery
query={graphql`
query SiteTitleQuery {
site {
siteMetadata {
title
}
}
}
`}
render={data => (
<Helmet
title={data.site.siteMetadata.title}
meta={[
{ name: 'description', content: 'Sample' },
{ name: 'keywords', content: 'sample, something' },
]}
>
<html lang="en" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.ico"/>
// Font icon
<link href="assets/css/plugin/font-awesome.min.css" rel="stylesheet" type="text/css" />
// CSS Global
<link href="../../assets/css/plugin/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="../../assets/css/plugin/bootstrap-select.min.css" rel="stylesheet" type="text/css" />
<link href="../../assets/css/plugin/owl.carousel.css" rel="stylesheet" type="text/css" />
<link href="../../assets/css/plugin/animate.css" rel="stylesheet" type="text/css" />
<link href="../../assets/css/plugin/subscribe-better.css" rel="stylesheet" type="text/css" />
// Custom CSS
<link href="../../assets/css/theme.css" rel="stylesheet" type="text/css" />
// Custom JS
<script src="../../assets/js/theme.js"></script>
<script src="../../assets/js/plugin/jquery-2.2.4.min.js"></script>
<script src="../../assets/js/plugin/bootstrap.min.js"></script>
<script src="../../assets/js/plugin/bootstrap-select.min.js"></script>
<script src="../../assets/js/plugin/owl.carousel.min.js"></script>
<script src="../../assets/js/plugin/jquery.plugin.min.js"></script>
<script src="../../assets/js/plugin/jquery.countdown.js"></script>
<script src="../../assets/js/plugin/isotope.js"></script>
<script src="../../assets/js/plugin/jquery.subscribe-better.min.js"></script>
<Helmet/>
<Header siteTitle={data.site.siteMetadata.title} class="main-header"/>
<div
style={{
margin: '0 auto',
maxWidth: 960,
padding: '0px 1.0875rem 1.45rem',
paddingTop: 0,
}}
>
{children}
</div>
)}
/>
)
Layout.propTypes = {
children: PropTypes.node.isRequired,
}
export default Layout
It returns the error:
/home/ec2-user/environment/bestpet-v1/src/components/layout.js
77:11 error Parsing error: Unexpected token, expected "}"
75 |
76 | Layout.propTypes = {
> 77 | children: PropTypes.node.isRequired,
| ^
78 | }
79 |
80 | export default Layout
It does not compile at all. I checked all the brackets and closing tags but apparently I'm missing something.
What am I doing wrong?
reactjs gatsby
edited Nov 20 '18 at 5:45
kit
1,1063716
asked Nov 19 '18 at 19:24
user1305579user1305579
328
add a comment |
0
0
0
I am building a GatsbyJS website and created the layout.js, index.js with some static data and am trying to compile it but it does not compile. The code from layout.js and the error message are below.
import React from 'react'
import PropTypes from 'prop-types'
import Helmet from 'react-helmet'
import { StaticQuery, graphql } from 'gatsby'
import Header from './header'
import './theme.css'
const Layout = ({ children }) => (
<StaticQuery
query={graphql`
query SiteTitleQuery {
site {
siteMetadata {
title
}
}
}
`}
render={data => (
<Helmet
title={data.site.siteMetadata.title}
meta={[
{ name: 'description', content: 'Sample' },
{ name: 'keywords', content: 'sample, something' },
]}
>
<html lang="en" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.ico"/>
// Font icon
<link href="assets/css/plugin/font-awesome.min.css" rel="stylesheet" type="text/css" />
// CSS Global
<link href="../../assets/css/plugin/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="../../assets/css/plugin/bootstrap-select.min.css" rel="stylesheet" type="text/css" />
<link href="../../assets/css/plugin/owl.carousel.css" rel="stylesheet" type="text/css" />
<link href="../../assets/css/plugin/animate.css" rel="stylesheet" type="text/css" />
<link href="../../assets/css/plugin/subscribe-better.css" rel="stylesheet" type="text/css" />
// Custom CSS
<link href="../../assets/css/theme.css" rel="stylesheet" type="text/css" />
// Custom JS
<script src="../../assets/js/theme.js"></script>
<script src="../../assets/js/plugin/jquery-2.2.4.min.js"></script>
<script src="../../assets/js/plugin/bootstrap.min.js"></script>
<script src="../../assets/js/plugin/bootstrap-select.min.js"></script>
<script src="../../assets/js/plugin/owl.carousel.min.js"></script>
<script src="../../assets/js/plugin/jquery.plugin.min.js"></script>
<script src="../../assets/js/plugin/jquery.countdown.js"></script>
<script src="../../assets/js/plugin/isotope.js"></script>
<script src="../../assets/js/plugin/jquery.subscribe-better.min.js"></script>
<Helmet/>
<Header siteTitle={data.site.siteMetadata.title} class="main-header"/>
<div
style={{
margin: '0 auto',
maxWidth: 960,
padding: '0px 1.0875rem 1.45rem',
paddingTop: 0,
}}
>
{children}
</div>
)}
/>
)
Layout.propTypes = {
children: PropTypes.node.isRequired,
}
export default Layout
It returns the error:
/home/ec2-user/environment/bestpet-v1/src/components/layout.js
77:11 error Parsing error: Unexpected token, expected "}"
75 |
76 | Layout.propTypes = {
> 77 | children: PropTypes.node.isRequired,
| ^
78 | }
79 |
80 | export default Layout
It does not compile at all. I checked all the brackets and closing tags but apparently I'm missing something.
What am I doing wrong?
reactjs gatsby
edited Nov 20 '18 at 5:45
kit
1,1063716
asked Nov 19 '18 at 19:24
user1305579user1305579
328
I am building a GatsbyJS website and created the layout.js, index.js with some static data and am trying to compile it but it does not compile. The code from layout.js and the error message are below.
import React from 'react'
import PropTypes from 'prop-types'
import Helmet from 'react-helmet'
import { StaticQuery, graphql } from 'gatsby'
import Header from './header'
import './theme.css'
const Layout = ({ children }) => (
<StaticQuery
query={graphql`
query SiteTitleQuery {
site {
siteMetadata {
title
}
}
}
`}
render={data => (
<Helmet
title={data.site.siteMetadata.title}
meta={[
{ name: 'description', content: 'Sample' },
{ name: 'keywords', content: 'sample, something' },
]}
>
<html lang="en" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.ico"/>
// Font icon
<link href="assets/css/plugin/font-awesome.min.css" rel="stylesheet" type="text/css" />
// CSS Global
<link href="../../assets/css/plugin/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="../../assets/css/plugin/bootstrap-select.min.css" rel="stylesheet" type="text/css" />
<link href="../../assets/css/plugin/owl.carousel.css" rel="stylesheet" type="text/css" />
<link href="../../assets/css/plugin/animate.css" rel="stylesheet" type="text/css" />
<link href="../../assets/css/plugin/subscribe-better.css" rel="stylesheet" type="text/css" />
// Custom CSS
<link href="../../assets/css/theme.css" rel="stylesheet" type="text/css" />
// Custom JS
<script src="../../assets/js/theme.js"></script>
<script src="../../assets/js/plugin/jquery-2.2.4.min.js"></script>
<script src="../../assets/js/plugin/bootstrap.min.js"></script>
<script src="../../assets/js/plugin/bootstrap-select.min.js"></script>
<script src="../../assets/js/plugin/owl.carousel.min.js"></script>
<script src="../../assets/js/plugin/jquery.plugin.min.js"></script>
<script src="../../assets/js/plugin/jquery.countdown.js"></script>
<script src="../../assets/js/plugin/isotope.js"></script>
<script src="../../assets/js/plugin/jquery.subscribe-better.min.js"></script>
<Helmet/>
<Header siteTitle={data.site.siteMetadata.title} class="main-header"/>
<div
style={{
margin: '0 auto',
maxWidth: 960,
padding: '0px 1.0875rem 1.45rem',
paddingTop: 0,
}}
>
{children}
</div>
)}
/>
)
Layout.propTypes = {
children: PropTypes.node.isRequired,
}
export default Layout
It returns the error:
/home/ec2-user/environment/bestpet-v1/src/components/layout.js
77:11 error Parsing error: Unexpected token, expected "}"
75 |
76 | Layout.propTypes = {
> 77 | children: PropTypes.node.isRequired,
| ^
78 | }
79 |
80 | export default Layout
It does not compile at all. I checked all the brackets and closing tags but apparently I'm missing something.
What am I doing wrong?
reactjs gatsby
reactjs gatsby
edited Nov 20 '18 at 5:45
kit
1,1063716
asked Nov 19 '18 at 19:24
user1305579user1305579
328
edited Nov 20 '18 at 5:45
kit
1,1063716
asked Nov 19 '18 at 19:24
user1305579user1305579
328
edited Nov 20 '18 at 5:45
kit
1,1063716
edited Nov 20 '18 at 5:45
kit
1,1063716
edited Nov 20 '18 at 5:45
kit
1,1063716
1,1063716
asked Nov 19 '18 at 19:24
user1305579user1305579
328
asked Nov 19 '18 at 19:24
user1305579user1305579
328
asked Nov 19 '18 at 19:24
user1305579user1305579
328
328
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
You aren't closing your Helmet tag. Right now you have this:
<Helmet>
<OtherStuff />
<Helmet />
That last “tag” is self-closing, not closing the opening tag. What you want is this:
<Helmet>
<OtherStuff />
</Helmet>
answered Nov 20 '18 at 3:17
coreywardcoreyward
49.5k1595124
Thank you. I did that. now it is returning another error at <Header siteTitle={data.site.siteMetadata.title} class="main-header"/> saying: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?
– user1305579
Nov 20 '18 at 12:26
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53381308%2fgatsbyjs-layout-js-returns-error-unexpected-token%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
You aren't closing your Helmet tag. Right now you have this:
<Helmet>
<OtherStuff />
<Helmet />
That last “tag” is self-closing, not closing the opening tag. What you want is this:
<Helmet>
<OtherStuff />
</Helmet>
answered Nov 20 '18 at 3:17
coreywardcoreyward
49.5k1595124
Thank you. I did that. now it is returning another error at <Header siteTitle={data.site.siteMetadata.title} class="main-header"/> saying: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?
– user1305579
Nov 20 '18 at 12:26
add a comment |
1
You aren't closing your Helmet tag. Right now you have this:
<Helmet>
<OtherStuff />
<Helmet />
That last “tag” is self-closing, not closing the opening tag. What you want is this:
<Helmet>
<OtherStuff />
</Helmet>
answered Nov 20 '18 at 3:17
coreywardcoreyward
49.5k1595124
Thank you. I did that. now it is returning another error at <Header siteTitle={data.site.siteMetadata.title} class="main-header"/> saying: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?
– user1305579
Nov 20 '18 at 12:26
add a comment |
1
1
1
You aren't closing your Helmet tag. Right now you have this:
<Helmet>
<OtherStuff />
<Helmet />
That last “tag” is self-closing, not closing the opening tag. What you want is this:
<Helmet>
<OtherStuff />
</Helmet>
answered Nov 20 '18 at 3:17
coreywardcoreyward
49.5k1595124
You aren't closing your Helmet tag. Right now you have this:
<Helmet>
<OtherStuff />
<Helmet />
That last “tag” is self-closing, not closing the opening tag. What you want is this:
<Helmet>
<OtherStuff />
</Helmet>
answered Nov 20 '18 at 3:17
coreywardcoreyward
49.5k1595124
answered Nov 20 '18 at 3:17
coreywardcoreyward
49.5k1595124
answered Nov 20 '18 at 3:17
coreywardcoreyward
49.5k1595124
answered Nov 20 '18 at 3:17
coreywardcoreyward
49.5k1595124
49.5k1595124
Thank you. I did that. now it is returning another error at <Header siteTitle={data.site.siteMetadata.title} class="main-header"/> saying: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?
– user1305579
Nov 20 '18 at 12:26
add a comment |
Thank you. I did that. now it is returning another error at <Header siteTitle={data.site.siteMetadata.title} class="main-header"/> saying: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?
– user1305579
Nov 20 '18 at 12:26
Thank you. I did that. now it is returning another error at <Header siteTitle={data.site.siteMetadata.title} class="main-header"/> saying: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?
– user1305579
Nov 20 '18 at 12:26
Thank you. I did that. now it is returning another error at <Header siteTitle={data.site.siteMetadata.title} class="main-header"/> saying: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?
– user1305579
Nov 20 '18 at 12:26
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53381308%2fgatsbyjs-layout-js-returns-error-unexpected-token%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
