Using the css Prop of @emotion/react and apply babel plugin

I am just submitting this issue so that it can be searched by others.

1. Install these packages:

yarn add @emotion/babel-plugin @emotion/react

1. Modify your vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react({
      jsxImportSource: "@emotion/react",
      babel: {
        plugins: ["@emotion/babel-plugin"],
      },
    }),
  ],
});

1. Modify tsconfig.json

  "compilerOptions": {
    "types": ["vite/client", "@emotion/react/types/css-prop"]

1. Modify .story/book/main.js

const react = require("@vitejs/plugin-react");

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
  framework: "@storybook/react",
  core: {
    builder: "storybook-builder-vite",
  },
  async viteFinal(config) {
    config.plugins = config.plugins.filter(
      (plugin) =>
        !(Array.isArray(plugin) && plugin[0]?.name.includes("vite:react"))
    );

    config.plugins.push(
      react({
        exclude: [/\.stories\.(t|j)sx?$/, /node_modules/],
        jsxImportSource: "@emotion/react",
        babel: {
          plugins: ["@emotion/babel-plugin"],
        },
      })
    );

    console.log(config.plugins);
    return config;
  },
};

That’s it! Happy coding!!

[bdow]

@terenceodonoghue - I was having the same problem and errors trying to get MDX working along side my stories. I saw your solution but I didn’t really want to add that pragma to every file in our repo. I ended up trying out the MDX2 Opt-in feature, and the MDX stories started building without issues! Shout out to @IanVS for all the help on Discord.

Here is my entire storybook/main.js

const { mergeConfig } = require("vite");
const path = require("path");
const reactPlugin = require("@vitejs/plugin-react");

module.exports = {
  core: { builder: "@storybook/builder-vite" },
  stories: ["../src/**/*.stories.tsx"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "storybook-addon-performance/register",
    "@storybook/addon-interactions",
  ],
  // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
  typescript: { check: false },
  async viteFinal(config) {
    const mergedConfig = mergeConfig(config, {
      esbuild: {
        // ignoring console warns of "Top-level "this" will be replaced with undefined since this file is an ECMAScript module"
        // See https://github.com/vitejs/vite/issues/8644#issuecomment-1159308803
        logOverride: { "this-is-undefined-in-esm": "silent" },
      },
      resolve: {
        alias: {
          src: path.resolve(__dirname, "../src"),
        },
      },
    });

    return {
      ...mergedConfig,
      plugins: [
        // Filter out `vite:react-jsx` per suggestion in `plugin-react`...
        // "You should stop using "vite:react-jsx" since this plugin conflicts with it."
        // Implementation suggestion from: https://github.com/storybookjs/builder-vite/issues/113#issuecomment-940190931
        ...config.plugins.filter(
          (plugin) => !(Array.isArray(plugin) && plugin.some((p) => p.name === "vite:react-jsx")),
        ),
        reactPlugin({ exclude: [/\.stories\.tsx?$/, /node_modules/], jsxImportSource: "@emotion/react" }),
      ],
      optimizeDeps: [
        ...(mergedConfig.optimizeDeps ? mergedConfig.optimizeDeps.include || [] : []),
        "@emotion/react/jsx-dev-runtime",
      ],
    };
  },
  reactOptions: { fastRefresh: true, strictMode: false },
};

[thielium]

@bestickley I know it’s been awhile since you asked, but in answer to your question: since storybook already defines the react plugin for vite, you have to remove it first, and then re-add it with a custom configuration.

If you do not omit the plugin that storybook provides, then vite complains about conflicting plugins.