now it's build-worthy

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 artifacts
-package-lock.json
+package-lock.json
+dist

package.json

@@ -3,15 +3,14 @@
   "private": true,
   "scripts": {
     "start": "sh -ac '. ./.env; react-static start'",
-    "stage": "react-static build --staging",
-    "build": "react-static build",
+    "stage": "sh -ac '. ./.env; react-static build --staging'",
+    "build": "sh -ac '. ./.env; react-static build'",
     "bundle": "react-static bundle",
     "export": "react-static export",
     "serve": "serve dist -p 3005 -s"
   },
   "dependencies": {
     "@apollo/client": "^3.3.6",
-    "@apollo/react-hooks": "4.0.0",
     "@reach/router": "1.3.4",
     "@rehooks/local-storage": "2.4.0",
     "@types/isomorphic-fetch": "0.0.35",

src/App.tsx

@@ -1,28 +1,28 @@
 import React from 'react';
 import { Root, Routes, addPrefetchExcludes } from 'react-static';
 import { Link, Router } from '@reach/router';
-import { ApolloProvider } from '@apollo/react-hooks';
+import { ApolloProvider } from '@apollo/client';
+import gqlClient from 'utils/gqlClient';
 import CartProvider from 'state/Cart';
 import CustomerProvider from 'state/Customer';
 import ShippingProvider from 'state/Shipping';
-import gqlClient  from 'utils/gqlClient';
+
+import './assets/styles/app.scss';
+
 import Header from 'components/Header';
 import Cart from 'containers/Cart';
 import Account from 'containers/Account';
 
-import './assets/styles/app.scss';
-
 // non-static routes
 addPrefetchExcludes(['cart', 'account', 'account/shipping', 'account/payment']);
 
 function App() {
 	return (
-		// @ts-ignore
 		<ApolloProvider client={gqlClient}>
-			<CartProvider>
-				<CustomerProvider>
-					<ShippingProvider>
-						<Root>
+			<Root>
+				<CartProvider>
+					<CustomerProvider>
+						<ShippingProvider>
 							<Header />
 							<div className="content" id="content">
 								<React.Suspense fallback={<em>Loading...</em>}>
@@ -44,15 +44,15 @@ function App() {
 									<div className="footer-border"></div>
 									<Link to="/contact">Contact</Link>
 									<div className="footer-border"></div>
-									<Link to="/terms-of-service">Terms of Service</Link> 	
+									<Link to="/terms">Terms of Service</Link> 	
 									<div className="footer-border"></div>
 									<Link to="/privacy-and-policy">Privacy Policy</Link> 
 								</div>
 							</footer>
-						</Root>
-					</ShippingProvider>
-				</CustomerProvider>
-			</CartProvider>
+						</ShippingProvider>
+					</CustomerProvider>
+				</CartProvider>
+			</Root>
 		</ApolloProvider>
 	)
 };

src/assets/styles/privacy-and-policy.scss → src/assets/styles/privacy.scss

@@ -1,6 +1,6 @@
 @import './variables.scss'; 
 
-.privacy-and-policy { 
+.privacy { 
     h3 { 
         font-weight: 400;
     }   

src/assets/styles/terms-of-service.scss → src/assets/styles/terms.scss

@@ -1,6 +1,6 @@
 @import './variables.scss';
 
-.terms-of-service {
+.terms {
     h3 { 
         font-weight: 400;
     }   

src/index.tsx

@@ -1,12 +1,12 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import { AppContainer } from 'react-hot-loader'
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { AppContainer } from 'react-hot-loader';
 
 // Your top level component
-import App from './App'
+import App from './App';
 
 // Export your top level component as JSX (for static rendering)
-export default App
+export default App;
 
 // Render your app
 if (typeof document !== 'undefined') {

src/pages/contact.tsx

@@ -1,10 +1,11 @@
 import React, { useState } from 'react';
 import { validateEmail } from 'utils/functions';
-import CustomInput from 'components/CustomInput';
-import CustomButton from 'components/CustomButton';
 
 import '../assets/styles/contact.scss';
 
+import CustomInput from 'components/CustomInput';
+import CustomButton from 'components/CustomButton';
+
 export default () => {
     const [alertMessage, setAlertMessage] = useState("");
     const [name, setName] = useState("");

src/pages/index.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useEffect, createRef } from 'react';
 import { useRouteData } from 'react-static';
-import { Link } from '@reach/router';
 import { ProductEdge, ProductConnection } from 'shopify-storefront-api-typings';
 
 import '../assets/styles/home.scss';
@@ -13,7 +12,6 @@ export default () => {
 	const videoRef = createRef<HTMLVideoElement>();
 
 	const { products }: { products: ProductConnection } = useRouteData();
-	console.log(products)
 	useEffect(() => {
 		['pause', 'ended'].forEach(evt => 
 			videoRef.current.addEventListener(evt, () => {
@@ -46,7 +44,6 @@ export default () => {
 					<p>
 						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean<br />congue cursus efficitur. Pellentesque odio tortor, suscipit nec tortor ut.
 					</p>
-					{/* <Link to="/shop">Shop Now</Link> */}
 					<a href="#products">Shop Now</a>
 				</div>
 			</section>

src/pages/login.tsx

@@ -42,7 +42,7 @@ export default () => {
             const { id, firstName, lastName, phone, addresses } = customer;
             setCustomer({ id, email, firstName, lastName, phone });
 
-            const address = addresses.edges.length > 0 ? addresses.edges[0] : {};
+            const address = addresses.edges.length > 0 ? addresses.edges[0].node : {};
             setShipping(address);
             navigate('/shop');
         };

src/pages/privacy-and-policy.tsx → src/pages/privacy.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import '../assets/styles/privacy-and-policy.scss';
+import '../assets/styles/privacy.scss';
 
 export default () => (
-    <div className="privacy-and-policy page">
+    <div className="privacy page">
       	<h1 className="page-title">Privacy and Policy</h1>
 		<div className="section-custom-border">	
             <p>

src/pages/product.tsx

@@ -38,6 +38,10 @@ const SingleProductPage = ({ product }: { product: Product }) => {
 		}
 	});
 
+	if (!product) {
+		return null;
+	}
+
 	const { variants, description }: {variants: ProductVariantConnection, description: string } = product;
 	const options: Array<ProductOption> = product.options.length > 0 && product.options.filter(({ name }) => name !== 'Title'); // Shopify keeps a default for some reason :|
 	let price = formatPrice(variants.edges[selectedVariant].node.priceV2.amount);

src/pages/terms-of-service.tsx → src/pages/terms.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Link } from '@reach/router';
 
-import '../assets/styles/terms-of-service.scss';
+import '../assets/styles/terms.scss';
 
 export default () => (
-    <div className="terms-of-service page">
+    <div className="terms page">
       	<h1 className="page-title">Terms of Service</h1>
 		<div className="section-custom-border">			
 			<p>

src/state/Cart.tsx

@@ -1,4 +1,5 @@
 import React, { createContext, useReducer, ReactNode } from 'react';
+import { isLocalStorageAvailable } from 'utils/functions';
 import { Checkout } from 'shopify-storefront-api-typings';
 
 type Props = {
@@ -11,7 +12,7 @@ type InitialStateType = {
 };
 
 const initialState = {
-    cart: JSON.parse(localStorage.getItem('cart')) || null,
+    cart: isLocalStorageAvailable() && JSON.parse(localStorage.getItem('cart')) || null,
     setCart: () => {}
 };
 
@@ -23,9 +24,9 @@ const reducer = (state: any, action: any) => {
     switch (action.type) {
         case actions.SET_CART:
             if (action.cart) {
-                localStorage.setItem('cart', JSON.stringify(action.cart));
+                isLocalStorageAvailable() && localStorage.setItem('cart', JSON.stringify(action.cart));
             } else {
-                localStorage.removeItem('cart');
+                isLocalStorageAvailable() && localStorage.removeItem('cart');
             }
             return { ...state, cart: action.cart };
         default:

src/state/Customer.tsx

@@ -1,4 +1,5 @@
 import React, { createContext, useReducer, ReactNode } from 'react';
+import { isLocalStorageAvailable } from 'utils/functions';
 import { Customer } from 'shopify-storefront-api-typings';
 import Cookies from 'js-cookie';
 
@@ -14,7 +15,7 @@ type InitialStateType = {
 };
 
 const initialState = {
-    customer: JSON.parse(localStorage.getItem('customer') !== undefined ? localStorage.getItem('customer') : null) || null,
+    customer: isLocalStorageAvailable() && JSON.parse(localStorage.getItem('customer') !== undefined ? localStorage.getItem('customer') : null) || null,
     setCustomer: () => {},    
     token: Cookies.get('vtok') || null,
     setToken: () => {}
@@ -29,9 +30,9 @@ const reducer = (state: any, action: any) => {
     switch (action.type) {
         case actions.SET_CUSTOMER:
             if (action.customer === null) {
-                localStorage.removeItem('customer');
+                isLocalStorageAvailable() && localStorage.removeItem('customer');
             } else {
-                localStorage.setItem('customer', JSON.stringify(action.customer));
+                isLocalStorageAvailable() && localStorage.setItem('customer', JSON.stringify(action.customer));
             }
             return { ...state, customer: action.customer };
         case actions.SET_TOKEN:

src/state/Shipping.tsx

@@ -1,4 +1,5 @@
 import React, { createContext, useReducer, ReactNode } from 'react';
+import { isLocalStorageAvailable } from 'utils/functions';
 import { MailingAddress } from 'shopify-storefront-api-typings';
 
 type Props = {
@@ -11,7 +12,7 @@ type InitialStateType = {
 };
 
 const initialState = {
-    shipping: JSON.parse(localStorage.getItem('shipping') !== undefined ? localStorage.getItem('shipping') : null) || null,
+    shipping: isLocalStorageAvailable() && JSON.parse(localStorage.getItem('shipping') !== undefined ? localStorage.getItem('shipping') : null) || null,
     setShipping: () => {},    
 };
 
@@ -23,9 +24,9 @@ const reducer = (state: any, action: any) => {
     switch (action.type) {
         case actions.SET_SHIPPING:
             if (action.shipping === null) {
-                localStorage.removeItem('shipping');
+                isLocalStorageAvailable() && localStorage.removeItem('shipping');
             } else {
-                localStorage.setItem('shipping', JSON.stringify(action.shipping));
+                isLocalStorageAvailable() && localStorage.setItem('shipping', JSON.stringify(action.shipping));
             }
             return { ...state, shipping: action.shipping };
         default:

src/utils/functions.ts

@@ -31,4 +31,8 @@ export const saveNewCart = (checkout, setCart) => {
     } else {
         console.log('nope');
     }
-};
+};
+
+export const isLocalStorageAvailable = () => {
+    return typeof window === 'object' || typeof window !== 'undefined';
+}