Using gatsby image in storybook

webpack.config.js

// @ts-check
const path = require("path");

/**
 * NOTE:
 *
 * See the following section of Storybook's docs for more information
 * on how the exported function in this file integrates with Storybook's
 * existing webpack config:
 *
 * https://storybook.js.org/docs/configurations/custom-webpack-config/
 */

const CopyPlugin = require("copy-webpack-plugin");

module.exports = ({ config }) => {
  /* ==================== Add TypeScript Support ==================== */

  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [
      {
        loader: require.resolve("babel-loader"),
        options: {
          presets: [["react-app", { flow: false, typescript: true }]],
          plugins: [
            require.resolve("@babel/plugin-proposal-class-properties"),
            require.resolve(
              "@babel/plugin-proposal-nullish-coalescing-operator"
            ),
            require.resolve("@babel/plugin-proposal-optional-chaining"),
            require.resolve("babel-plugin-remove-graphql-queries")
          ]
        }
      }
    ]
  });

  config.module.rules.push({
    test: /\.stories\.tsx?$/,
    use: [
      {
        loader: require.resolve("@storybook/addon-storysource/loader"),
        options: {
          parser: "typescript",
          plugins: [
            require.resolve(
              "@babel/plugin-proposal-nullish-coalescing-operator"
            ),
            require.resolve("@babel/plugin-proposal-optional-chaining")
          ]
        }
      }
    ],
    enforce: "pre"
  });

  config.resolve.extensions.push(".ts", ".tsx");

  /* ================================================================ */

  /**
   * NOTE:
   * In order to gets our global styles and custom fonts loaded correctly
   * into Storybook, we need to copy them over into the build output
   * directory. See the comment at the top of `/styles/global.css` for
   * more information on why this is needed.
   *
   * It is also worth explaining why the `styles` and `fonts` directories
   * are copied over in the way they are. It is done in this way because
   * in `/styles/global.css`, the font files are referenced as relative
   * imports. When using relative imports in CSS files that are parsed by
   * webpack, webpack will pick these imports up just like it does in
   * JavaScript files (meaning that they are made part of the dependency
   * tree). We want this process to happen, but unfortunately, as this CSS
   * file isn't picked up by Storybook's webpack (as explained in the
   * global CSS file mentioned above), we have to make sure that these
   * relative imports work as expected in Storybook without being parsed
   * and transformed by webpack.
   *
   * This is done by copying both the global CSS file and the fonts into
   * their own directories. This means that even though the global CSS file
   * isn't parsed for relative imports, the paths are still valid, as the
   * original source structure is kept the same in the output directory.
   */

  config.plugins.push(
    new CopyPlugin([
      { from: "styles", to: "public/styles" },
      { from: "fonts", to: "public/fonts" },
      { from: "stories/static", to: "public/images" }, // Copy static files
      { from: "public/static", to: "./static/" } // Copy gatsby generated static files.
    ])
  );

  /**
   * Add aliases for gatsby images.
   * Separate types to preserve type safety between Fixed and Fluid images
   */
  config.resolveLoader = {
    alias: {
      "gatsby-image-fixed": path.join(__dirname, "loaders/gatsby-image.js"),
      "gatsby-image-fluid": path.join(__dirname, "loaders/gatsby-image.js")
    }
  };

  /* ================================================================ */

  /**
   * NOTE:
   * This is required to get Gatsby's code working in storybook.
   * https://www.gatsbyjs.org/docs/visual-testing-with-storybook/
   */

  config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/];
  config.module.rules[0].use[0].loader = require.resolve("babel-loader");
  config.module.rules[0].use[0].options.presets = [
    require.resolve("@babel/preset-react"),
    require.resolve("@babel/preset-env")
  ];
  config.resolve.mainFields = ["browser", "module", "main"];

  /* ================================================================ */

  return config;
};