fix failing storybook build

Author: thecodingwizard

.storybook/main.js

@@ -1,3 +1,5 @@
+const React = require('react');
+
 module.exports = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
@@ -19,6 +21,31 @@ module.exports = {
     builder: 'webpack5',
   },
 
+  // This code was added from https://www.gatsbyjs.com/docs/how-to/testing/visual-testing-with-storybook/
+  // because doing import { navigate } from "gatsby" was causing some weird React.Fragment error
+  // unclear if this slows down build times. If it does, maybe go to ProblemsListItemDropdown.tsx
+  // remove the import navigate statement and get rid of this code.
+  webpackFinal: async config => {
+    // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
+    config.module.rules[0].exclude = [
+      /node_modules\/(?!(gatsby|gatsby-script)\/)/,
+    ];
+    // Use correct react-dom depending on React version.
+    if (parseInt(React.version) <= 18) {
+      // no clue why uncommenting this is needed to fix react is not defined in canvas
+      // config.externals = ["react-dom/client"];
+    }
+    // Remove core-js to prevent issues with Storybook
+    config.module.rules[0].exclude = [/core-js/];
+
+    // Use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
+    config.module.rules[0].use[0].options.plugins.push(
+      require.resolve('babel-plugin-remove-graphql-queries')
+    );
+    config.resolve.mainFields = ['browser', 'module', 'main'];
+    return config;
+  },
+
   // https://github.com/storybookjs/storybook/issues/12585
   // react docgen typescript plugin hampers hot reloading time, so we'll disable it in development
   ...(process.env.NODE_ENV === 'development'

.storybook/preview.js

@@ -3,6 +3,26 @@ import { DarkModeContext } from '../src/context/DarkModeContext';
 import '../src/styles/main.css';
 import './storybook.css';
 
+import { action } from '@storybook/addon-actions';
+
+// Gatsby's Link overrides:
+// Gatsby Link calls the `enqueue` & `hovering` methods on the global variable ___loader.
+// This global object isn't set in storybook context, requiring you to override it to empty functions (no-op),
+// so Gatsby Link doesn't throw errors.
+global.___loader = {
+  enqueue: () => {},
+  hovering: () => {},
+};
+// This global variable prevents the "__BASE_PATH__ is not defined" error inside Storybook.
+global.__BASE_PATH__ = '/';
+
+// Navigating through a gatsby app using gatsby-link or any other gatsby component will use the `___navigate` method.
+// In Storybook, it makes more sense to log an action than doing an actual navigate. Check out the actions addon docs for more info: https://storybook.js.org/docs/react/essentials/actions
+
+window.___navigate = pathname => {
+  action('NavigateTo:')(pathname);
+};
+
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {

postcss.config.js

@@ -1,8 +1,8 @@
 module.exports = {
   plugins: [
     require('postcss-import'),
+    'tailwindcss/nesting',
     require(`tailwindcss`),
-    require('postcss-nested'),
     require(`autoprefixer`),
     ...(process.env.NODE_ENV === `production` ? [require(`cssnano`)] : []),
   ],