reactjs - GatsbyJS Layout.js 返回错误意外令牌
问题描述
我正在构建一个 GatsbyJS 网站并使用一些静态数据创建了layout.js
,index.js
并尝试编译它但它无法编译。来自的代码layout.js
和错误消息如下。
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
它返回错误:
/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
它根本不编译。我检查了所有括号和结束标签,但显然我遗漏了一些东西。
我究竟做错了什么?
解决方案
你没有关闭你的Helmet
标签。现在你有这个:
<Helmet>
<OtherStuff />
<Helmet />
最后一个“标签”是自动关闭的,而不是关闭开始标签。你想要的是这样的:
<Helmet>
<OtherStuff />
</Helmet>
推荐阅读
- c# - 使用 PagedList 自定义分页 asp.net
- javascript - Javascript - 在焦点文本字段上自动完成
- codenameone - 根据设备调整组件
- windows - SystemConfigurationException 只读 properties.settings.default.save()
- python - 在python中使用统计信息为不同样本定义一个函数
- java - 线程“main”java.lang.RuntimeException 中的异常:无法使链接成为绝对链接
- julia - 如何将多维数组传递给 Julia 中的函数?
- asp.net-mvc - 从 Razor 页面 OnGet 调用控制器方法
- python - 嵌套列表以打印特定部分
- c# - 每个命名空间将进入哪个程序集?