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

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.

Blog Posts by Tag

Storybook 8 Config for Gatsby 5 Apps

My Custom Pokémon TCG Card & NFT Generator