fix: ResizeObserver is not defined error

Close #259.

content/visualisation/2021-06-04-Workplace-Conflict/index.mdx

@@ -15,6 +15,7 @@ pngImagePath: workplace-conflict-costs-employers-28-billion-a-year.png
 svgImagePath: workplace-conflict-costs-employers-28-billion-a-year.svg
 ---
 
+import Loadable from "@loadable/component";
 import Workconflict from "./workconflict";
 
 <Workconflict />

content/visualisation/2021-06-04-Workplace-Conflict/workconflict.jsx

@@ -6,7 +6,10 @@
 
 import React from "react";
 import PropTypes from "prop-types";
-import { ResponsiveWaffle } from "@nivo/waffle";
+import loadable from "@loadable/component";
+const ResponsiveWaffle = loadable(() => import("@nivo/waffle"), {
+  resolveComponent: (components) => components.ResponsiveWaffle
+});
 import depression from "./depression.png";
 
 const THEME = {

content/visualisation/2021-06-24-Increased-snack-intake-in-UK-and-Australia/marimekkoPlot.jsx

@@ -6,7 +6,10 @@
 
 import React from "react";
 import PropTypes from "prop-types";
-import { ResponsiveMarimekko } from "@nivo/marimekko";
+import loadable from "@loadable/component";
+const ResponsiveMarimekko = loadable(() => import("@nivo/marimekko"), {
+  resolveComponent: (components) => components.ResponsiveMarimekko
+});
 import Snack from "./snacks.svg";
 import AUFlag from "./australia.svg";
 import UKFlag from "./united-kingdom.svg";

content/visualisation/2021-07-22-Millions-of-UK-residents-struggle-to-access-food/radarPlot.jsx

@@ -6,7 +6,10 @@
 
 import React from "react";
 import PropTypes from "prop-types";
-import { ResponsiveRadar } from "@nivo/radar";
+import loadable from "@loadable/component";
+const ResponsiveRadar = loadable(() => import("@nivo/radar"), {
+  resolveComponent: (components) => components.ResponsiveRadar
+});
 import Dish from "./food-dish.svg";
 
 export const data = [

content/visualisation/2021-08-23-Leading-risk-factors-for-DALYs/bumpChart/bumpChart.jsx

@@ -1,20 +1,23 @@
-import React from "react"
-import { ResponsiveBump } from "@nivo/bump"
+import React from "react";
+import loadable from "@loadable/component";
+const ResponsiveBump = loadable(() => import("@nivo/bump"), {
+  resolveComponent: (components) => components.ResponsiveBump
+});
 
 const bumpChart = ({ theme, data, gender }) => {
   const riskColour = (item) => {
     switch (item.category) {
       case "Environmental":
-        return "#A9FF6B"
+        return "#A9FF6B";
       case "Metabolic":
-        return "#70DBFF"
+        return "#70DBFF";
       case "Behavioural":
-        return "#F99494"
+        return "#F99494";
     }
-  }
+  };
 
   const customTooltip = (item) => {
-    const { id, color, data } = item.serie
+    const { id, color, data } = item.serie;
 
     return (
       <div
@@ -66,8 +69,8 @@ const bumpChart = ({ theme, data, gender }) => {
           </div>
         </div>
       </div>
-    )
-  }
+    );
+  };
 
   return (
     <ResponsiveBump
@@ -116,7 +119,7 @@ const bumpChart = ({ theme, data, gender }) => {
         legendOffset: gender == "male" && -40
       }}
     />
-  )
-}
+  );
+};
 
-export default bumpChart
+export default bumpChart;

content/visualisation/2021-09-22-Improved-Rice-Cooking-Approach/improved-approach.jsx

@@ -1,5 +1,8 @@
 import React from "react";
-import { ResponsiveBar } from "@nivo/bar";
+import loadable from "@loadable/component";
+const ResponsiveBar = loadable(() => import("@nivo/bar"), {
+  resolveComponent: (components) => components.ResponsiveBar
+});
 import Chicken from "./images/chicken.svg";
 import Rice from "./images/grain-rice.svg";
 import Mushroom from "./images/mushroom.svg";

content/visualisation/2021-10-20-Marine-Fishes-Near-Extinction/extinctionMap.jsx

@@ -1,5 +1,8 @@
 import React from "react";
-import { ResponsiveChoroplethCanvas } from "@nivo/geo";
+import loadable from "@loadable/component";
+const ResponsiveChoroplethCanvas = loadable(() => import("@nivo/geo"), {
+  resolveComponent: (components) => components.ResponsiveChoroplethCanvas
+});
 import worldCountries from "./data/world_countries.json";
 import probabilityData from "./data/prediction.json";
 import Shark from "./images/shark.svg";

gatsby-node.js

@@ -12,30 +12,37 @@ const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
 const fs = require("fs");
 
 exports.onCreateWebpackConfig = ({ actions, stage, loaders }) => {
-  actions.setWebpackConfig({
+  const webpackConfig = {
     plugins: [new NodePolyfillPlugin()],
     resolve: {
       fallback: {
         fs: false
       }
+    },
+    module: {
+      rules: [
+        {
+          /* prevent error from canvas used by trianglify:
+           * error Generating SSR bundle failed Unexpected character '' (1:0) & (1:2)
+           */
+          test: /canvas/,
+          use: loaders.null()
+        }
+      ]
     }
-  });
-
-  if (stage === "build-html" || stage === "develop-html") {
-    actions.setWebpackConfig({
-      module: {
-        rules: [
-          {
-            /* prevent error from canvas used by trianglify:
-             * error Generating SSR bundle failed Unexpected character '' (1:0)
-             */
-            test: /canvas/,
-            use: loaders.null()
-          }
-        ]
+  };
+
+  if (stage === "build-html") {
+    webpackConfig.module.rules.push(
+      // WebpackError: ReferenceError: ResizeObserver is not defined
+      {
+        test: /@nivo\/core/,
+        use: loaders.null()
       }
-    });
+    );
   }
+
+  actions.setWebpackConfig(webpackConfig);
 };
 
 /**