Gatsby v4 + Storybook v6 + Theme UI (Emotion v11)

.babelrc

{
  "presets": [
    [
      "babel-preset-gatsby",
      {
        "reactRuntime": "automatic"
      }
    ]
  ]
}

.storybook_main.js

const path = require("path");

// Location of root node_modules
const modulesDir = path.join(__dirname, "../../../../node_modules");

const updateEmotionAliases = (config) => ({
  ...config,
  resolve: {
    ...config.resolve,
    alias: {
      ...config.resolve.alias,
      "@emotion/core": path.join(modulesDir, "@emotion/react"),
      "@emotion/styled": path.join(modulesDir, "@emotion/styled"),
      "@emotion/styled-base": path.join(modulesDir, "@emotion/styled"),
      "emotion-theming": path.join(modulesDir, "@emotion/react"),
    },
  },
});

module.exports = {
  managerWebpack: updateEmotionAliases,
  webpackFinal: updateEmotionAliases,
  babel: (config) => {
    const getEntryIndexByName = (type, name) => {
      return config[type].findIndex((entry) => {
        const entryName = Array.isArray(entry) ? entry[0] : entry;
        return entryName.includes(name);
      });
    };

    // Replace reference to v10 of the Babel plugin to v11.
    const emotionPluginIndex = getEntryIndexByName(
      "plugins",
      "babel-plugin-emotion"
    );
    config.plugins[emotionPluginIndex] = require.resolve(
      "@emotion/babel-plugin"
    );

    // Storybook's Babel config is already configured to use the new JSX runtime.
    // We just need to point it to Emotion's version.
    // https://emotion.sh/docs/css-prop#babel-preset
    const presetReactIndex = getEntryIndexByName(
      "presets",
      "@babel/preset-react"
    );
    config.presets[presetReactIndex][1].importSource = "@emotion/react";

    return config;
  },
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "storybook-addon-gatsby",
  ],
  core: {
    builder: "webpack5",
  },
};

.storybook_preview.js

import { ThemeProvider } from "theme-ui";
import { addDecorator } from "@storybook/react";
import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";

import "@fontsource/open-sans";
import "@fontsource/open-sans/600.css";
import "@fontsource/mulish";

import theme from "../src/gatsby-plugin-theme-ui";

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  viewport: {
    viewports: INITIAL_VIEWPORTS,
  },
};

addDecorator((Story) => (
  <ThemeProvider theme={theme}>
    <Story />
  </ThemeProvider>
));

package.json

{
  "dependencies": {
    "@fontsource/mulish": "^4.5.1",
    "@fontsource/open-sans": "^4.5.1",
    "@sentry/gatsby": "^6.14.2",
    "@theme-ui/color": "^0.12.0",
    "@theme-ui/presets": "^0.12.0",
    "@types/react-helmet": "^6.1.2",
    "axios": "^0.24.0",
    "dotenv": "^10.0.0",
    "faunadb": "^4.4.1",
    "formik": "^2.2.9",
    "gatsby": "^4.1.0",
    "gatsby-plugin-gatsby-cloud": "^4.1.0",
    "gatsby-plugin-google-tagmanager": "^4.1.1",
    "gatsby-plugin-image": "^2.1.0",
    "gatsby-plugin-react-helmet": "^5.1.0",
    "gatsby-plugin-sharp": "^4.1.0",
    "gatsby-plugin-theme-ui": "^0.12.0",
    "gatsby-source-contentful": "^6.1.0",
    "gatsby-source-filesystem": "^4.1.0",
    "gatsby-transformer-sharp": "^4.1.0",
    "http-errors": "^1.8.0",
    "joi": "^17.4.2",
    "localforage": "^1.10.0",
    "moment": "^2.29.1",
    "prettier": "^2.3.2",
    "query-string": "^7.0.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "react-hook-form": "^7.5.2",
    "react-share": "^4.4.0",
    "stripe": "^8.186.1",
    "theme-ui": "^0.12.0",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@babel/core": "^7.15.8",
    "@storybook/addon-actions": "^6.3.10",
    "@storybook/addon-essentials": "^6.3.10",
    "@storybook/addon-links": "^6.3.10",
    "@storybook/addon-viewport": "^6.3.10",
    "@storybook/builder-webpack5": "^6.3.10",
    "@storybook/manager-webpack5": "^6.3.10",
    "@storybook/react": "^6.3.10",
    "babel-loader": "^8.2.2",
    "babel-plugin-remove-graphql-queries": "^4.1.0",
    "gatsby-plugin-manifest": "^4.1.0",
    "storybook-addon-gatsby": "^0.0.2"
  }
}