Upgrade to Gatsby WordPress source and gatsby ^v3

packages/gatsby-woocommerce-theme/gatsby-config.js

@@ -18,7 +18,17 @@ module.exports = ({ wordPressUrl, gatsbySiteUrl, googleTagManagerId, fbAppId })
     `gatsby-plugin-react-helmet`,
     `gatsby-transformer-sharp`,
     `gatsby-plugin-sharp`,
-    `gatsby-plugin-sass`,
+    {
+      resolve: `gatsby-plugin-sass`,
+      options: {
+        cssLoaderOptions: {
+          esModule: false,
+          modules: {
+            namedExport: false,
+          },
+        },
+      },
+    },
     {
       resolve: `gatsby-source-filesystem`,
       options: {
@@ -27,7 +37,7 @@ module.exports = ({ wordPressUrl, gatsbySiteUrl, googleTagManagerId, fbAppId })
       },
     },
     {
-      resolve: `gatsby-source-wordpress-experimental`,
+      resolve: `gatsby-source-wordpress`,
       options: {
         url: `${wordPressUrl}/graphql`,
         verbose: true,

packages/gatsby-woocommerce-theme/package.json

@@ -1,59 +1,58 @@
 {
   "name": "gatsby-woocommerce-theme",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "Gatsby WooCommerce Theme - Electra",
   "main": "index.js",
   "author": "Imran Sayed",
   "license": "MIT",
   "devDependencies": {
     "@babel/core": "^7.10.4",
-    "@storybook/addon-actions": "^5.3.19",
+    "@storybook/addon-actions": "^6.3.2",
     "@storybook/addon-links": "^5.3.19",
     "@storybook/addon-notes": "^5.3.19",
     "@storybook/addon-storysource": "^5.3.19",
     "@storybook/addon-viewport": "^5.3.19",
     "@storybook/addons": "^5.3.19",
     "@storybook/react": "^5.3.19",
-    "babel-jest": "^26.1.0",
+    "babel-jest": "^27.0.6",
     "babel-loader": "^8.1.0",
-    "babel-preset-gatsby": "^0.5.2",
-    "babel-preset-react-app": "^9.1.2",
-    "gatsby": "^2.24.2",
+    "babel-preset-gatsby": "^1.8.0",
+    "babel-preset-react-app": "^10.0.0",
     "jest": "^26.1.0",
     "prettier": "^2.0.5",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-test-renderer": "^16.13.1",
-    "sass-loader": "^9.0.2",
+    "sass-loader": "^12.1.0",
     "styled-components": "^5.1.1"
   },
   "dependencies": {
     "@apollo/client": "^3.1.3",
     "@wordpress/base-styles": "^3.3.0",
     "@wordpress/block-library": "^2.27.0",
-    "bootstrap": "^4.5.2",
+    "bootstrap": "^5.0.2",
     "classnames": "^2.2.6",
     "cross-fetch": "^3.0.5",
     "dompurify": "^2.0.14",
-    "gatsby": "2.24.74",
+    "gatsby": "^3.8.1",
     "gatsby-link": "^2.4.13",
     "gatsby-plugin-google-tagmanager": "^2.3.11",
     "gatsby-plugin-manifest": "^2.4.18",
     "gatsby-plugin-offline": "^3.2.17",
     "gatsby-plugin-react-helmet": "^3.3.10",
     "gatsby-plugin-robots-txt": "^1.5.1",
-    "gatsby-plugin-sass": "^2.3.12",
+    "gatsby-plugin-sass": "^4.8.0",
     "gatsby-plugin-sharp": "^2.6.19",
     "gatsby-source-filesystem": "^2.3.19",
-    "gatsby-source-wordpress-experimental": "^6.0.0",
+    "gatsby-source-wordpress": "^5.8.0",
     "gatsby-transformer-sharp": "^2.5.11",
     "isomorphic-fetch": "^2.2.1",
     "js-search": "^2.0.0",
     "lodash": "^4.17.19",
-    "node-sass": "^4.14.1",
+    "node-sass": "^6.0.1",
     "prop-types": "^15.7.2",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
     "react-js-pagination": "^3.0.3",
     "react-lazy-load-image-component": "^1.5.0",
@@ -66,9 +65,9 @@
     "validator": "^13.1.1"
   },
   "peerDependencies": {
-    "gatsby": "^2.24.74",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "gatsby": "^2.32.0 || ^3.8.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "keywords": [
     "gatsby",

packages/gatsby-woocommerce-theme/src/apollo/client.js

@@ -6,7 +6,7 @@ import fetch from 'isomorphic-fetch';
 import { ApolloClient, createHttpLink, InMemoryCache, ApolloLink } from '@apollo/client';
 import { isEmpty } from 'lodash';
 
-// if ( process.browser ) {
+// if ( undefined !== window ) {
 // 	console.warn( 'hey', process.env.GATSBY_WORDPRESS_SITE_URL );
 // }
 
@@ -23,7 +23,7 @@ export const middleware = new ApolloLink( ( operation, forward ) => {
 	/**
 	 * If session data exist in local storage, set value as session header.
 	 */
-	const session = ( process.browser ) ?  localStorage.getItem( "woo-session" ) : null;
+	const session = ( undefined !== window ) ?  localStorage.getItem( "woo-session" ) : null;
 
 	if ( ! isEmpty( session ) ) {
 		headersData = {
@@ -34,7 +34,7 @@ export const middleware = new ApolloLink( ( operation, forward ) => {
 	/**
 	 * If auth token exist in local storage, set value as authorization header.
 	 */
-	const auth = ( process.browser ) ?  JSON.parse( localStorage.getItem( "auth" ) ) : null;
+	const auth = ( undefined !== window ) ?  JSON.parse( localStorage.getItem( "auth" ) ) : null;
 	const token = ( ! isEmpty( auth ) ) ? auth.authToken : null;
 
 	if ( ! isEmpty( token ) ) {

packages/gatsby-woocommerce-theme/src/components/cart/cart-item/index.js

@@ -26,7 +26,7 @@ const CartItem = ( {
 	 */
 	const handleQtyChange = ( event, cartKey, type ) => {
 
-		if ( process.browser ) {
+		if ( undefined !== window ) {
 
 			event.stopPropagation();
 			let newQty;

packages/gatsby-woocommerce-theme/src/components/context/AppContext.js

@@ -6,7 +6,7 @@ export const AppProvider = (props) => {
   const [cart, setCart] = useState(null);
 
   useEffect(() => {
-    if (process.browser) {
+    if (undefined !== window) {
       let cartData = localStorage.getItem("woo-next-cart");
       cartData = null !== cartData ? JSON.parse(cartData) : "";
       setCart(cartData);

packages/gatsby-woocommerce-theme/src/components/header/nav.js

@@ -3,14 +3,14 @@
  */
 import React from 'react';
 import { useEffect, useState } from 'react';
-import  Link from 'gatsby-link';
 import { each, isEmpty } from 'lodash';
 import classnames from 'classnames';
+import { normalizePath } from "../../utils/functions";
+import  Link from 'gatsby-link';
 
 import DropdownIcon from '../icons/dropdown-icon';
-import { normalizePath } from "../../utils/functions";
-import CartIcon from "../cart/cart-icon";
 import WishListIcon from "../wishlist/wishlist-icon";
+import CartIcon from "../cart/cart-icon";
 
 const Nav = ( props ) => {
 

packages/gatsby-woocommerce-theme/src/components/register/index.js

@@ -22,7 +22,7 @@ const Register = ({ setLoggedIn }) => {
   const [showAlertBar, setShowAlertBar] = useState(true);
 
   // Check if the user is validated already.
-  if (process.browser) {
+  if (undefined !== window) {
     const userValidated = isUserValidated();
 
     // Redirect the user to My Account page if user is already validated.
@@ -112,7 +112,7 @@ const Register = ({ setLoggedIn }) => {
    * @return {void}
    */
   const handleRegister = async (event) => {
-    if (process.browser) {
+    if (undefined !== window) {
       event.preventDefault();
 
       // Validation and Sanitization.

packages/gatsby-woocommerce-theme/src/components/seo/index.js

@@ -96,16 +96,16 @@ function SEO( { description, lang, meta, title, header: { siteTitle }, seoData,
 		};
 	}
 
-	const seoTitle = seoData.title || title;
-	const seoDescription = seoData.metaDesc || description || site.siteMetadata.description;
-	const ogDesc = seoData.opengraphDescription || seoDescription;
-	const twitterDesc = seoData.twitterDescription || seoDescription;
-	const ogTitle = seoData.opengraphTitle || seoTitle;
-	const twitterTitle = seoData.twitterTitle || seoTitle;
-	const googleVerify = seo.webmaster.googleVerify || '';
-	const ogURL = `${ site.siteMetadata.siteUrl }${ uri }`;
-	const fbAppId = site.siteMetadata.fbAppId;
-	const canonical = `${ site.siteMetadata.siteUrl }${ uri }`;
+	const seoTitle = seoData?.title ?? title;
+	const seoDescription = ( seoData?.metaDesc ?? description ) || ( site?.siteMetadata?.description ?? '');
+	const ogDesc = seoData?.opengraphDescription ?? seoDescription;
+	const twitterDesc = seoData?.twitterDescription ?? seoDescription;
+	const ogTitle = seoData?.opengraphTitle ?? seoTitle;
+	const twitterTitle = seoData?.twitterTitle ?? seoTitle;
+	const googleVerify = seo?.webmaster?.googleVerify ?? '';
+	const ogURL = `${ site?.siteMetadata?.siteUrl ?? '' }${ uri }`;
+	const fbAppId = site?.siteMetadata?.fbAppId ?? '';
+	const canonical = `${ site?.siteMetadata?.siteUrl ?? '' }${ uri }`;
 
 	return (
 		<Helmet

packages/gatsby-woocommerce-theme/src/templates/front-page/index.js

@@ -7,7 +7,6 @@ import SEO from "../../components/seo";
 import { getOgImage } from "../../utils/functions";
 
 const FrontPage = ( props ) => {
-
 	const {
 		      pageContext: {
 			      page: { title, seo, uri },

packages/gatsby-woocommerce-theme/src/utils/functions.js

@@ -214,7 +214,7 @@ const isProductInCart = (existingProductsInCart, productId) => {
  * @return {any | string} Updated cart
  */
 export const removeItemFromCart = (productId) => {
-  if (!process.browser) {
+  if (undefined === window) {
     return null;
   }
 
@@ -393,7 +393,7 @@ export const getUpdatedItems = (products, newQty, cartKey) => {
 export const isUserLoggedIn = () => {
   let authData = null;
 
-  if (process.browser) {
+  if (undefined !== window) {
     authData = JSON.parse(localStorage.getItem("auth"));
   }
   return authData;
@@ -415,7 +415,7 @@ export const setAuth = (authData) => {
 export const isUserValidated = () => {
   let userLoggedInData = "";
 
-  if (process.browser) {
+  if (undefined !== window) {
     let authTokenData = localStorage.getItem("auth");
 
     if (!isEmpty(authTokenData)) {
@@ -556,7 +556,7 @@ export const addWishListToLocalStorage = (wishList) => {
  * @returns {boolean}
  */
 export const isProductInWishList = ( productId ) => {
-	if ( ! process.browser ) {
+	if ( undefined === window ) {
 		return null;
 	}
 	const existingWishList = JSON.parse( localStorage.getItem( 'woo_wishlist' ) );
@@ -569,7 +569,7 @@ export const isProductInWishList = ( productId ) => {
 }
 
 export const getWishListProducts = () => {
-	if ( ! process.browser ) {
+	if ( undefined === window ) {
 		return null;
 	}
 	return JSON.parse( localStorage.getItem( 'woo_wishlist' ) );
@@ -583,6 +583,7 @@ export const getWishListProducts = () => {
  * @return {string} Sanitized string
  */
 export const sanitize = (content) => {
-	return process.browser ? DOMPurify.sanitize(content) : content
+
+	return undefined !== window ? DOMPurify?.sanitize(content) : content
 }
 

site/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "site",
-	"version": "2.0.1",
+	"version": "2.1.0",
 	"description": "Site to test the Gatsby WooCommerce Theme",
 	"main": "gatsby-config.js",
 	"scripts": {
@@ -21,10 +21,16 @@
 	"author": "Imran Sayed",
 	"license": "MIT",
 	"dependencies": {
-		"dotenv": "^8.2.0",
-		"gatsby": "^2.29.1",
-		"react": "^17.0.1",
-		"react-dom": "^17.0.1"
+		"dotenv": "^10.0.0",
+		"gatsby": "^3.8.1",
+		"mini-css-extract-plugin": "0.4.1",
+		"react": "^17.0.2",
+		"react-dom": "^17.0.2"
+	},
+	"resolutions": {
+		"graphql": "^15.4.0",
+		"graphql-compose": "^7.25.0",
+		"webpack": "^5.24.2"
 	},
 	"devDependencies": {}
 }