Configuring Storybook 8 with Gatsby can be a little tricky. Here is what you need to do.
Make sure your&nbsp;main.ts file looks like this:
<pre><code>
import type { StorybookConfig } from '@storybook/react-webpack5';
import { Configuration, RuleSetRule } from 'webpack';
import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
import path from 'path';
 
const config: StorybookConfig = {
 addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
 framework: '@storybook/react-webpack5',
 stories: ['../**/*.stories.@(js|jsx|mjs|ts|tsx)'],
 webpackFinal: async (config: Configuration) =&gt; {
 // Custom rule for ts files
 const tsRule: RuleSetRule = {
 test: /\.(tsx?|jsx?)$/,
 loader: 'ts-loader',
 options: {
 transpileOnly: true
 }
 };
 
 if (config.module?.rules) {
 // Make whatever fine-grained changes you need
 config.module.rules.push({
 test: /\.scss$/,
 use: ['style-loader', 'css-loader', 'sass-loader'],
 include: path.resolve(__dirname, '../')
 });
 }
 
 // tsconfig paths
 if (config.resolve) {
 config.resolve.plugins = [
 ...(config.resolve.plugins || []),
 new TsconfigPathsPlugin({
 extensions: config.resolve.extensions
 })
 ];
 }
 
 return {
 ...config,
 module: {
 ...config.module,
 rules: [...(config.module?.rules || []), tsRule]
 }
 };
 }
};
 
export default config;
 
</code></pre>
Then use your preview.ts file to import any styles, as well as Gatsby's suggestions.
<pre><code>import { action } from "@storybook/addon-actions"

// Import your scss
import '@/scss/my-app.scss';

// Gatsby's Link overrides:
// Gatsby Link calls the `enqueue` &amp; `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: () =&gt; {},
 hovering: () =&gt; {},
}
// 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 =&gt; {
 action("NavigateTo:")(pathname)
}
</code>
</pre>

Configuring Storybook 8 with Gatsby can be a little tricky. Here is what you need to do.

Storybook 8 Config for Gatsby 5 Apps

For all languages besides Japanese, Wizards of the Coast was tasked with creating the cards for the Pok&eacute;mon TCG. Using JSON, I was able to make digital reproductions of the cards from each set, with the holographic cards even having a functional animated holo background. All of the cards in this library are completely re-created using SCSS/SVG/React JSX. The only static images are used for the card energy backgrounds, and the actual Pok&eacute;mon since it would be quite an undertaking to trace all of them out. Maybe some day! All of the card elements including energy symbols, fonts, evolution box, and set symbols are all SVG, scalable graphics.
<a class="btn btn-primary" href="https://poketcg.app/digital-tcg/wotc-sets/" rel="follow noopener" target="_blank">Go To Digital Sets Library</a>

For all languages besides Japanese, Wizards of the Coast was tasked with creating the cards for the Pokémon TCG. Using JSON, I was able to m

The Original Pokémon TCG: Digitzed!

For all languages besides Japanese, Wizards of the Coast was tasked with creating the cards for the Pokémon TCG. Using JSON, I was able to make digital reproductions of the cards from each set - all editable in the card creator.

The Original Pokémon TCG: Digitized!

Created using Typescript, React, SVG elements for all card assets and symbols, pure CSS for the cards themselves - this project resulted in super high quality ready-for-print cards for creating custom TCG cards. Obviously this example is catered towards the popular Pok&eacute;mon TCG - but this generator could be applied for any brand or digital TCG / NFT creator.
<a class="btn btn-primary" href="https://poketcg.app/card-creator/" rel="follow noopener" target="_blank">Go To Card Creator</a>

Created using Typescript, React, SVG elements for all card assets and symbols, pure CSS for the card templates.

My Custom Pokémon TCG Card & NFT Generator

Created using Typescript, React, SVG elements for all card assets and symbols, pure  CSS for the cards themselves - this project resulted in super high quality ready-for-print cards for creating custom TCG cards.

ButterCMS

NextJS for custom component and template rendering.

NextJS 13+

For state management, JSX, and custom hooks.

React 18+

A frontend cloud for deploying super-fast static sites with performance in mind.

Latest Posts

Storybook 8 Config for Gatsby 5 Apps

The Original Pokémon TCG: Digitized!

My Custom Pokémon TCG Card & NFT Generator