Tworzę stronę docelowej i mam prosty błąd, ale nie mogę znaleźć przyczyny w moim kodzie. Dla mnie komponent jest absolutnie logiczny i ta sama struktura jak każdy inny.

Obecnie otrzymuję następujący błąd na podstawie tego komponentu:

./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)

Mój kod:

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 &amp; 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;

Prawdopodobnie będzie to prosty błąd składni lub podobny. Mam nadzieję, że ktoś ma pomysł lub znajdzie błąd.

0
Joël A 23 listopad 2020, 14:18

1 odpowiedź

Najlepsza odpowiedź

Brakuje się} na końcu. Powinien być:

const Content = () => {
  const gContext = useContext(GlobalContext);

  const Pricing1 = () => {
    const [isMonthly, setIsMonthly] = useState(false);

    return (
      <>
        <content..../>
      </>
    );
  };
}
export default Content;
0
Tomas 23 listopad 2020, 11:26