Upgrading to gatsby 4 beta

package.json

@@ -7,22 +7,22 @@
   "dependencies": {
     "babel-plugin-styled-components": "^1.12.0",
     "bootstrap": "^4.5.3",
-    "gatsby": "^3.0.3",
-    "gatsby-image": "^3.0.0",
+    "gatsby": "^4.0.0",
+    "gatsby-image": "^3.11.0",
     "gatsby-plugin-facebook-pixel": "^1.0.5",
-    "gatsby-plugin-google-tagmanager": "^3.0.0",
-    "gatsby-plugin-manifest": "^3.0.0",
-    "gatsby-plugin-netlify": "^3.0.0",
-    "gatsby-plugin-offline": "^4.0.0",
-    "gatsby-plugin-preact": "^5.5.0",
-    "gatsby-plugin-react-helmet": "^4.0.0",
+    "gatsby-plugin-google-tagmanager": "^4.0.0",
+    "gatsby-plugin-manifest": "^4.0.0",
+    "gatsby-plugin-netlify": "^3.14.0",
+    "gatsby-plugin-offline": "^5.0.0",
+    "gatsby-plugin-preact": "^6.0.0",
+    "gatsby-plugin-react-helmet": "^5.0.0",
     "gatsby-plugin-robots-txt": "^1.5.5",
-    "gatsby-plugin-sass": "^4.0.2",
-    "gatsby-plugin-sharp": "^3.0.1",
-    "gatsby-plugin-sitemap": "^3.0.0",
-    "gatsby-plugin-styled-components": "^4.0.0",
-    "gatsby-source-filesystem": "^3.0.0",
-    "gatsby-transformer-sharp": "3.0.0",
+    "gatsby-plugin-sass": "^5.0.0",
+    "gatsby-plugin-sharp": "^4.0.0",
+    "gatsby-plugin-sitemap": "^5.0.0",
+    "gatsby-plugin-styled-components": "^5.0.0",
+    "gatsby-source-filesystem": "^4.0.0",
+    "gatsby-transformer-sharp": "^4.0.0",
     "node-sass": "^5.0.0",
     "preact": "^10.5.13",
     "preact-render-to-string": "^5.1.19",
@@ -54,9 +54,10 @@
   "scripts": {
     "build": "gatsby build",
     "develop": "gatsby develop",
+    "clean": "gatsby clean",
     "lint": "eslint src",
     "reformat": "prettier --write \"**/*.{js,jsx,json,md}\"",
-    "start": "npm run develop",
+    "start": "gatsby develop",
     "serve": "gatsby serve",
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
   },

src/components/banner.js

@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { Container } from "reactstrap"
 import { HeaderItem, IconLink } from "./bannerHelper"
 import {

src/components/bannerHelper.js

@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import Link from "./link"
 import styled from "styled-components"
 import NumberFormat from "react-number-format"

src/components/benefits.js

@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { Container, Row, Col } from "reactstrap"
 import { FaCode } from "react-icons/fa"
 import { StaticQuery, graphql } from "gatsby"

src/components/box.js

@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import styled from "styled-components"
 
 const BoxStyling = styled.div`

src/components/btn.js

@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import Link from "./link"
 import styled from "styled-components"
 

src/components/footer.js

@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { Container, Row, Col } from "reactstrap"
 import { FaFacebookSquare, FaInstagram } from "react-icons/fa"
 import Link from "./link"

src/components/form.js

@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { NormalField } from "reactstrap-form-fields"
 import Button from "./btn"
 

src/components/homeFeatures.js

@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { Container, Col, Row } from "reactstrap"
 import styled from "styled-components"
 import { useStaticQuery, graphql } from "gatsby"

src/components/hr.js

@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import Styled from "styled-components"
 
 let StyledHr = Styled.hr`

src/components/layout.js

@@ -5,7 +5,7 @@
  * See: https://www.gatsbyjs.org/docs/use-static-query/
  */
 
-import React from "react"
+import * as React from "react"
 import PropTypes from "prop-types"
 import { useStaticQuery, graphql } from "gatsby"
 

src/components/link.js

@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { Link as GatsbyLink } from "gatsby"
 // Since DOM elements <a> cannot receive activeClassName
 // and partiallyActive, destructure the prop here and

src/components/page-title.js

@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import styled from "styled-components"
 
 const Background = styled.div`

src/components/pageTemplate.js

@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { Row, Col, Container } from "reactstrap"
 import Layout from "../components/layout"
 import PageTitle from "../components/page-title"

src/components/seo.js

@@ -5,7 +5,7 @@
  * See: https://www.gatsbyjs.org/docs/use-static-query/
  */
 
-import React from "react"
+import * as React from "react"
 import PropTypes from "prop-types"
 import Helmet from "react-helmet"
 import { useStaticQuery, graphql } from "gatsby"

src/components/slider.js

@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import Slider from "react-slick"
 import { useStaticQuery, graphql } from "gatsby"
 import styled from "styled-components"

src/components/subFooter.js

@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { Container } from "reactstrap"
 
 let SubFooter = ({ title }) => (

src/components/testimonials.js

@@ -1,16 +1,16 @@
-import React from 'react'
-import {Col, Row, Container} from 'reactstrap'
-import {FaStar} from 'react-icons/fa'
-import styled from 'styled-components'
+import * as React from "react"
+import { Col, Row, Container } from "reactstrap"
+import { FaStar } from "react-icons/fa"
+import styled from "styled-components"
 
 let Background = styled.div`
   background: linear-gradient(to bottom, #f9fbfd 0, #fff 100%);
 `
 
-let Testimonial = ({stars = 5, content}) => (
+let Testimonial = ({ stars = 5, content }) => (
   <Col md={4}>
-    {[...Array(stars)].map(star => (
-      <FaStar className="mr-1" color="#ec9a3c"/>
+    {[...Array(stars)].map((star) => (
+      <FaStar className="mr-1" color="#ec9a3c" />
     ))}
     <p className="mt-3">{content}</p>
     <h6 className="font-weight-bold mb-0">Bruce Wayne</h6>
@@ -25,14 +25,15 @@ export default () => (
       <Row className="d-flex justify-content-center">
         <Col md="7">
           <p className="text-center text-secondary">
-            We've been the leading <u>website</u> and <u>marketing</u> provider in Australia for more than two decades. Here’s what our clients say.
+            We've been the leading <u>website</u> and <u>marketing</u> provider
+            in Australia for more than two decades. Here’s what our clients say.
           </p>
         </Col>
       </Row>
       <Row className="mt-4">
-        <Testimonial content="Fastly provides development teams an open source frontend framework for creating rich, optimized websites and a cloud platform for delivering them on a blazing fast edge network."/>
-        <Testimonial content="Fastly is blazing fast for browsing the web! I highly recommend this product for creating your next static website."/>
-        <Testimonial content="Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit."/>
+        <Testimonial content="Fastly provides development teams an open source frontend framework for creating rich, optimized websites and a cloud platform for delivering them on a blazing fast edge network." />
+        <Testimonial content="Fastly is blazing fast for browsing the web! I highly recommend this product for creating your next static website." />
+        <Testimonial content="Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit." />
       </Row>
     </Container>
   </Background>

src/pages/404.js

@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 
 import Layout from "../components/layout"
 import SEO from "../components/seo"

src/pages/about.js

@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import PageTemplate from "../components/pageTemplate"
 
 let About = () => (

src/pages/contact.js

@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { Row, Col, Container } from "reactstrap"
 import Link from "../components/link"
 import Layout from "../components/layout"
@@ -8,7 +8,7 @@ import Styled from "styled-components"
 import Hr from "../components/hr"
 import PageTitle from "../components/page-title"
 import { graphql } from "gatsby"
-import NumberFormat from 'react-number-format'
+import NumberFormat from "react-number-format"
 
 let Cirle = Styled.div`
   height: 4rem;
@@ -35,8 +35,10 @@ let ContactItem = ({ text, type, Icon, href, children }) => (
           <Link to={href} className="reset">
             {children ? children : text}
           </Link>
+        ) : children ? (
+          children
         ) : (
-          children ? children : text
+          text
         )}
       </span>
     </div>
@@ -63,10 +65,18 @@ let Contact = ({ data }) => {
             type="Phone"
             Icon={FaPhone}
           >
-            <NumberFormat value={phone} displayType={'text'} format="#### ### ###"/>
+            <NumberFormat
+              value={phone}
+              displayType={"text"}
+              format="#### ### ###"
+            />
           </ContactItem>
           <ContactItem text={fax} type="Fax" Icon={FaFax}>
-            <NumberFormat value={phone} displayType={'text'} format="#### ### ###"/>
+            <NumberFormat
+              value={phone}
+              displayType={"text"}
+              format="#### ### ###"
+            />
           </ContactItem>
         </Row>
         <hr />

src/pages/index.js

@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 
 import { Container, Row, Col } from "reactstrap"
 import Link from "../components/link"
@@ -13,7 +13,7 @@ import Hr from "../components/hr"
 import Benefits from "../components/benefits"
 import styled from "styled-components"
 import HomeFeatures from "../components/homeFeatures"
-import Testimonials from '../components/testimonials'
+import Testimonials from "../components/testimonials"
 
 let StyledBackground = styled.div`
   background: linear-gradient(to bottom, #f9fbfd 0, #fff 100%);
@@ -76,7 +76,7 @@ let Index = () => (
       </div>
     </StyledBackground>
     <HomeFeatures />
-    <Testimonials/>
+    <Testimonials />
   </Layout>
 )