nextのstorybookでemotionが効かねぇ

直し方

.storybook/main.tsに以下のように追記する。

.storybook/main.ts

import type { StorybookConfig } from '@storybook/nextjs';
const path = require('path');
const toPath = (_path) => path.join(process.cwd(), _path);
const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-onboarding',
    '@storybook/addon-interactions',
  ],
  framework: {
    name: '@storybook/nextjs',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
+  babel: (options) => ({
+    ...options,
+    presets: [...options.presets, '@emotion/babel-preset-css-prop'],
+  }),
};
export default config;

環境

• next@14.0.4
• storybook@7.6.9
• node@18.19.0
• @storybook/nextjs@7.6.4

状況

開発者ツールにcss=You have tried to stringify object returned from css function. It isn't supposed to be ...が表示されるおしゃれなのかわかりずらいのかよくわからない状態。
いろいろ治す方法は日本語であるが私がやった限りこの方法が一番簡潔でうまく良かった。

参考

• コードの出典
• vite使ってる場合はこっちでうまく動きました

@emotion/babel-pluginのほうがいいっていうけど？

自分のやり方と環境だとうまく動かなかったので、どなたかbabel分かるマンいたら教えてください。とりあえず@emotion/babel-preset-css-propでも動いたのでそれでやってる。

なんでvite使わないの？

nextでvite使うのが大変そうだったのと、storybookでviteつかって、開発でwebpack使うみたいに混ぜるとprocess.envとimport.metaの違いでめんどくさそう。