still works, webpack 5 storybook

Author: thecodingwizard

.storybook/main.js

@@ -12,40 +12,13 @@ module.exports = {
       },
     },
     '@storybook/addon-a11y',
+    'storybook-addon-gatsby',
   ],
-  webpackFinal: async config => {
-    // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
-    config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/];
-    // use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7)
-    config.module.rules[0].use[0].loader = require.resolve('babel-loader');
-    // use @babel/preset-react for JSX and env (instead of staged presets)
-    config.module.rules[0].use[0].options.presets = [
-      require.resolve('@babel/preset-react'),
-      require.resolve('@babel/preset-env'),
-    ];
-    config.module.rules[0].use[0].options.plugins = [
-      // use @babel/plugin-proposal-class-properties for class arrow functions
-      require.resolve('@babel/plugin-proposal-class-properties'),
-      // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
-      require.resolve('babel-plugin-remove-graphql-queries'),
-    ];
-    // Prefer Gatsby ES6 entrypoint (module) over commonjs (main) entrypoint
-    config.resolve.mainFields = ['browser', 'module', 'main'];
-    config.module.rules.push({
-      test: /\.(ts|tsx)$/,
-      loader: require.resolve('babel-loader'),
-      options: {
-        presets: [['react-app', { flow: false, typescript: true }]],
-        plugins: [
-          require.resolve('@babel/plugin-proposal-class-properties'),
-          // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
-          require.resolve('babel-plugin-remove-graphql-queries'),
-        ],
-      },
-    });
-    config.resolve.extensions.push('.ts', '.tsx');
-    return config;
+
+  core: {
+    builder: 'webpack5',
   },
+
   // 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

@@ -1,8 +1,7 @@
 import * as React from 'react';
+import { DarkModeContext } from '../src/context/DarkModeContext';
 import '../src/styles/main.css';
 import './storybook.css';
-import { DarkModeContext } from '../src/context/DarkModeContext';
-import { action } from '@storybook/addon-actions';
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
@@ -48,19 +47,3 @@ export const decorators = [
     </div>
   ),
 ];
-
-// 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 any errors.
-global.___loader = {
-  enqueue: () => {},
-  hovering: () => {},
-};
-// This global variable is 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. Checkout the actions addon docs for more info: https://github.com/storybookjs/storybook/tree/master/addons/actions.
-window.___navigate = pathname => {
-  action('NavigateTo:')(pathname);
-};

package.json

@@ -99,6 +99,7 @@
     "remark-math": "4.0.0",
     "remark-mdx-frontmatter": "1.1.1",
     "remark-slug": "6.0.0",
+    "storybook-addon-gatsby": "^0.0.5",
     "styled-components": "^5.3.5",
     "tailwindcss": "^3.1.3",
     "tippy.js": "^6.3.1",

src/components/markdown/CodeBlock/CodeBlock.tsx

@@ -135,6 +135,7 @@ class CodeBlock extends React.Component<
 > {
   codeSnips = [];
   static contextType = SpoilerContext;
+  // declare context: React.ContextType<typeof SpoilerContext>;
   static defaultProps = {
     copyButton: true,
   };

yarn.lock

@@ -22077,6 +22077,11 @@ store2@^2.12.0:
   resolved "https://registry.npmjs.org/store2/-/store2-2.12.0.tgz"
   integrity sha512-7t+/wpKLanLzSnQPX8WAcuLCCeuSHoWdQuh9SB3xD0kNOM38DNf+0Oa+wmvxmYueRzkmh6IcdKFtvTa+ecgPDw==
 
+storybook-addon-gatsby@^0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/storybook-addon-gatsby/-/storybook-addon-gatsby-0.0.5.tgz#94f5b67bab8659d0248b65e60dabc3702818ce8b"
+  integrity sha512-18f8Kc6mx8mEFfqY2DgF9ayDfmM58+9IjJqIxGV4bA4r2EtB/Q1LDNELIJmpLLyA5NrSvECxCqzLu7jNBlWgmA==
+
 storybook-dark-mode@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/storybook-dark-mode/-/storybook-dark-mode-1.1.0.tgz#4aca307a9c09f1b95743da2db6b07c8eea99ed24"