fix(dashboard-v2): fix Gatsby build & serve flow

packages/dashboard-v2/gatsby-config.js

@@ -9,6 +9,7 @@ module.exports = {
     "gatsby-plugin-react-helmet",
     "gatsby-plugin-sharp",
     "gatsby-transformer-sharp",
+    "gatsby-plugin-styled-components",
     "gatsby-plugin-postcss",
     {
       resolve: "gatsby-source-filesystem",

packages/dashboard-v2/gatsby-ssr.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+import "@fontsource/sora/300.css"; // light
+import "@fontsource/sora/400.css"; // normal
+import "@fontsource/sora/500.css"; // medium
+import "@fontsource/sora/600.css"; // semibold
+import "@fontsource/source-sans-pro/400.css"; // normal
+import "@fontsource/source-sans-pro/600.css"; // semibold
+import "./src/styles/global.css";
+
+export function wrapPageElement({ element, props }) {
+  const Layout = element.type.Layout ?? React.Fragment;
+  return <Layout {...props}>{element}</Layout>;
+}

packages/dashboard-v2/package.json

@@ -56,7 +56,7 @@
     "gatsby-plugin-provide-react": "^1.0.2",
     "gatsby-plugin-react-helmet": "^5.6.0",
     "gatsby-plugin-sharp": "^4.6.0",
-    "gatsby-plugin-styled-components": "^5.7.0",
+    "gatsby-plugin-styled-components": "^5.8.0",
     "gatsby-source-filesystem": "^4.6.0",
     "gatsby-transformer-sharp": "^4.6.0",
     "prettier": "2.5.1",

packages/dashboard-v2/src/components/Tabs/ActiveTabIndicator.js

@@ -35,6 +35,9 @@ export const ActiveTabIndicator = ({ tabRef }) => {
   );
 };
 
-ActiveTabIndicator.propTypes = {
+// Needed, because we're using an Element constant here which Gatsby doesn't recognize during build time.
-  tabRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.instanceOf(Element) })]),
+if (typeof window !== "undefined") {
-};
+  ActiveTabIndicator.propTypes = {
+    tabRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.instanceOf(Element) })]),
+  };
+}

packages/dashboard-v2/src/pages/index.js

@@ -53,7 +53,7 @@ const IndexPage = () => {
               </ul>
             </Panel>,
           ]}
-        ></Slider>
+        />
       </div>
       {showRecentActivity && (
         <div className="mt-10">

packages/dashboard-v2/yarn.lock

@@ -8249,10 +8249,10 @@ gatsby-plugin-sharp@^4.6.0:
     svgo "1.3.2"
     uuid "3.4.0"
 
-gatsby-plugin-styled-components@^5.7.0:
+gatsby-plugin-styled-components@^5.8.0:
-  version "5.7.0"
+  version "5.8.0"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-styled-components/-/gatsby-plugin-styled-components-5.7.0.tgz#8ba7b4ddb1722dcd0efd4fc6f1a8e62f47be012c"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-styled-components/-/gatsby-plugin-styled-components-5.8.0.tgz#5d8c81802ed9266435aa1145451bfb3ac582ad37"
-  integrity sha512-mX8N4nqIX0Ow/pUSORUb8WlKvgX7foCoWZ0AifyBOFnhBCbRWYTsXFWwiea6jCnST5V61b2TOFpjIHcvHvc9aQ==
+  integrity sha512-4ma9PgOr3U5TUX6uwAqFW+VX+fDxmt1y4oM3ArfZufaiQvZJ52cuf/uiyI+Tx1DJebcypEpR5dXYVl9ZX1bUHg==
   dependencies:
     "@babel/runtime" "^7.15.4"