Question

我正在构建一个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

它根本不编译。我检查了所有括号和结束标记，但显然我遗漏了一些东西。

我在做什么错了？

Answer 1

您没有关闭Helmet标签。现在你有这个：

<Helmet>
<OtherStuff />
<Helmet />

最后一个“标签”是自动关闭的，而不是关闭开始的标签。您想要的是什么

<Helmet>
  <OtherStuff />
</Helmet>

GatsbyJS Layout.js返回错误的意外令牌

1 个答案: