Import' 和'export' 可能只出现在顶层。但它是在顶层和尽头。 （盖茨比和反应 JS）
Posted
技术标签:
【中文标题】Import\' 和\'export\' 可能只出现在顶层。但它是在顶层和尽头。 （盖茨比和反应 JS）【英文标题】：Import' and 'export' may only appear at the top level. But it is at the top level and end. (Gatsby & React JS)Import' 和'export' 可能只出现在顶层。但它是在顶层和尽头。 （盖茨比和反应 JS） 【发布时间】：2021-03-06 02:36:34 【问题描述】：我正在创建一个登录页面，但我遇到了一个简单的错误，但在我的代码中找不到原因。对我来说，该组件是绝对合乎逻辑的，并且与任何其他组件的结构相同。
我目前收到以下基于此组件的错误：
./src/sections/landing/Prices.js
Module Error (from ./node_modules/eslint-loader/index.js):
C:\XXXXXXX\xxx-gatsby-1.4\xxx-gatsby\src\sections\landing\Prices.js
232:1 error Parsing error: 'import' and 'export' may only appear at the top level
230 | ;
231 |
> 232 | export default Content;
| ^
233 |
✖ 1 problem (1 error, 0 warnings)
我的代码：
import React, useContext from "react";
import Container, Row, Col from "react-bootstrap";
import GlobalContext from "../../context/GlobalContext";
import imgC from "../../assets/image/l2/jpg/l2-content2-img.jpg";
const Content = () =>
const gContext = useContext(GlobalContext);
const Pricing1 = () =>
const [isMonthly, setIsMonthly] = useState(false);
return (
<>
/* <!-- Content Area --> */
<div className="content-section2 pt-12 pb-9 pt-lg-21 pb-lg-25 bg-default-2">
<Container>
<Row className="justify-content-center">
<Col xl="6" lg="8" sm="10">
<div className="section-title text-center mb-12 mb-lg-17">
<h2 className="title gr-text-4 mb-7">
Pricing & Plans
</h2>
<p className="gr-text-8 px-lg-7 px-xl-0">
With lots of unique blocks, you can easily build a page
without coding. Build your next landing page.
</p>
</div>
</Col>
</Row>
</Container>
<Container>
<div className="text-center pt-9">
<div
className="mb-13 d-inline-flex position-relative"
id="pricing-dynamic-deck--head"
>
<span className="period month gr-text-8 gr-text-color ">
Monthly
</span>
<a
href="/#"
className=`btn-toggle mx-3 price-deck-trigger $
isMonthly ? "" : "active"
`
onClick=(e) =>
e.preventDefault();
setIsMonthly(!isMonthly);
>
<span className="round"></span>
</a>
<span className="period year gr-text-8 gr-text-color">
Yearly
</span>
<span className="badge gr-badge text-primary gr-text-12 gr-bg-blue-opacity-1 rounded-pill ml-5 text-uppercase">
Save 25%
</span>
</div>
<Row className="justify-content-center">
<Col lg="4" md="6" sm="10" className="mb-9">
<div className="pricing-card bg-white gr-hover-shadow-1 border text-left pt-9 pb-9 pr-9 pr-xl-13 pl-9 pl-xl-13 bg-white rounded-10">
<div className="price-content">
<span className="small-title gr-text-12 text-primary font-weight-bold text-uppercase">
Starter
</span>
<div className="d-flex align-items-end mt-11 ">
<span className="currency mr-2 gr-text-6 font-weight-bold line-spacing-none text-blackish-blue">
$
</span>
<h2 className="price-value gr-text-2 font-weight-bold line-spacing-none mb-0 text-blackish-blue">
isMonthly ? "49" : "19"
<span className="d-none">.</span>
</h2>
<span className="per gr-text-9 text-blackish-blue">
/month
</span>
</div>
<span className="price-bottom-text gr-text-11 mt-5 text-blackish-blue gr-opacity-7 d-inline-flex">
isMonthly ? "billed monthly" : "billed yearly"
</span>
<ul className="card-list list-style-check pl-0 mt-7 mt-lg-11">
<li className="gr-text-9">
<i className="icon icon-check-simple"></i>Commercial
License
</li>
<li className="gr-text-9">
<i className="icon icon-check-simple"></i>100+ html UI
Elements
</li>
<li className="gr-text-9">
<i className="icon icon-check-simple"></i>Unlimited
Domain Support
</li>
<li className="disabled gr-text-9">
<i className="icon icon-simple-remove"></i>6 months
premium support
</li>
<li className="disabled gr-text-9">
<i className="icon icon-simple-remove"></i>Lifetime
updates
</li>
</ul>
</div>
<Button className="with-icon gr-hover-y px-xl-8 px-lg-4 px-sm-8 px-4">
Start Free Trial
<i className="icon icon-tail-right font-weight-bold"></i>
</Button>
<span className="btn-bottom-text d-block gr-text-11 text-blackish-blue gr-opacity-7 mt-5">
No credit card required
</span>
</div>
</Col>
<Col lg="4" md="6" sm="10" className="mb-9">
<div className="pricing-card bg-white gr-hover-shadow-1 border text-left pt-9 pb-9 pr-9 pr-xl-13 pl-9 pl-xl-13 bg-white rounded-10">
<div className="price-content">
<span className="small-title gr-text-12 text-primary font-weight-bold text-uppercase">
Standard
</span>
<div className="d-flex align-items-end mt-11 ">
<span className="currency mr-2 gr-text-6 font-weight-bold line-spacing-none text-blackish-blue">
$
</span>
<h2 className="price-value gr-text-2 font-weight-bold line-spacing-none mb-0 text-blackish-blue">
isMonthly ? "99" : "49"
<span className="d-none">.</span>
</h2>
<span className="per gr-text-9 text-blackish-blue">
/month
</span>
</div>
<span className="price-bottom-text gr-text-11 mt-5 text-blackish-blue gr-opacity-7 d-inline-flex">
" "
isMonthly ? "billed monthly" : "billed yearly"
</span>
<ul className="card-list list-style-check pl-0 mt-7 mt-lg-11">
<li className="gr-text-9">
<i className="icon icon-check-simple"></i>Commercial
License
</li>
<li className="gr-text-9">
<i className="icon icon-check-simple"></i>100+ HTML UI
Elements
</li>
<li className="gr-text-9">
<i className="icon icon-check-simple"></i>Unlimited
Domain Support
</li>
<li className="gr-text-9">
<i className="icon icon-check-simple"></i>6 months
premium support
</li>
<li className="disabled gr-text-9">
<i className="icon icon-simple-remove"></i>Lifetime
updates
</li>
</ul>
</div>
<Button className="with-icon gr-hover-y px-xl-8 px-lg-4 px-sm-8 px-4">
Start Free Trial
<i className="icon icon-tail-right font-weight-bold"></i>
</Button>
<span className="btn-bottom-text d-block gr-text-11 text-blackish-blue gr-opacity-7 mt-5">
No credit card required
</span>
</div>
</Col>
<Col lg="4" md="6" sm="10" className="mb-9">
<div className="pricing-card bg-white gr-hover-shadow-1 border text-left pt-9 pb-9 pr-9 pr-xl-13 pl-9 pl-xl-13 bg-white rounded-10">
<div className="price-content">
<span className="small-title gr-text-12 text-primary font-weight-bold text-uppercase">
Premium
</span>
<div className="d-flex align-items-end mt-11">
<span className="currency mr-2 gr-text-6 font-weight-bold line-spacing-none text-blackish-blue">
$
</span>
<h2 className="price-value gr-text-2 font-weight-bold line-spacing-none mb-0 text-blackish-blue">
isMonthly ? "129" : "99"
<span className="d-none">.</span>
</h2>
<span className="per gr-text-9 text-blackish-blue">
/month
</span>
</div>
<span className="price-bottom-text gr-text-11 mt-5 text-blackish-blue gr-opacity-7 d-inline-flex">
" "
isMonthly ? "billed monthly" : "billed yearly"
</span>
<ul className="card-list list-style-check pl-0 mt-7 mt-lg-11">
<li className="gr-text-9">
<i className="icon icon-check-simple"></i>Commercial
License
</li>
<li className="gr-text-9">
<i className="icon icon-check-simple"></i>100+ HTML UI
Elements
</li>
<li className="gr-text-9">
<i className="icon icon-check-simple"></i>Unlimited
Domain Support
</li>
<li className="gr-text-9">
<i className="icon icon-check-simple"></i>6 months
premium support
</li>
<li className="gr-text-9">
<i className="icon icon-check-simple"></i>Lifetime
updates
</li>
</ul>
</div>
<Button className="with-icon gr-hover-y px-xl-8 px-lg-4 px-sm-8 px-4">
Start Free Trial
<i className="icon icon-tail-right font-weight-bold"></i>
</Button>
<span className="btn-bottom-text d-block gr-text-11 text-blackish-blue gr-opacity-7 mt-5">
No credit card required
</span>
</div>
</Col>
</Row>
</div>
</Container>
</div>
</>
);
;
export default Content;
可能是一些简单的语法错误或类似错误。我希望有人有想法或发现错误。
【问题讨论】：
【参考方案1】：最后你缺少 。应该是：
const Content = () =>
const gContext = useContext(GlobalContext);
const Pricing1 = () =>
const [isMonthly, setIsMonthly] = useState(false);
return (
<>
<content..../>
</>
);
;
export default Content;
【讨论】：
以上是关于Import' 和'export' 可能只出现在顶层。但它是在顶层和尽头。 （盖茨比和反应 JS）的主要内容，如果未能解决你的问题，请参考以下文章
Line7:1：解析错误：“import”和“export”可能只出现在顶层
NPM + Browserify 错误：ParseError: 'import' 和 'export' 可能只出现在 'sourceType: module' 中
Import' 和'export' 可能只出现在顶层。但它是在顶层和尽头。 （盖茨比和反应 JS）
Cypress ParseError：“import”和“export”可能只出现在“sourceType：module”中
export、export default和import用法详解，这一篇就够了
编译失败。 ./src/reportWebVitals.js 中的错误。 reportWebVitals.js：“导入”和“导出”可能只出现在顶层 (3:4)