Gatsby's StaticImage not rendering in Storybook

Question

I'm trying to write a storybook for my component with Gatsby's StaticImage but this ends up in nothing at all rendered and an error disguised as warning in the console:

Please ensure that "gatsby-plugin-image" is included in the plugins array in gatsby-config.js, and that your version of gatsby is at least 2.24.78
(anonymous) @ static-image.server.tsx:52

I wonder if there's a way to render component using StaticImage outside of Gatsby?

Component is trivial:

import React from 'react';
import { StaticImage } from 'gatsby-plugin-image';

export const Card = ({ title }) => {
  return (
    <div>
      <div>{title}</div>
      <StaticImage src="../../assets/images/background.png" alt="" width={300} height={100}/>
    </div>
  );
};

I'm using Gatsby v3 & Storybook v6.3

Mockery

Answer 1

Based on the Gatsby Documentation, it isn't presently supported yet.

Note: Writing stories for components that use StaticImage from gatsby-plugin-image is currently not supported. Contributions to making this possible are welcome.

Clotildecloture

Thanks, I didn't realize that! Apparently it's time to migrate to next.js... – Mockery