Storybook上でEmotionが動作しないエラーの対処

## エラー内容
Storybook上でEmotionを使ったスタイル指定が効かない問題に直面した。例えば、スタイルを次のようにEmotionのcssを使って書いてみる。

```sample.jsx
import React from 'react';
import {css} from "@emotion/react";

const myStyle = css`
  color: red;
`;

function RedText() {
    return (
        <div css={myStyle}>'redtext' </div>
    )
}

export default RedText;
```
RedTextは赤い「redtext」という文字を表示してほしい。ところが、これをStorybook上で確認すると、文字は黒のままでスタイルが効いてくれない。
コンソールで確認すると、redtextのdiv要素に次のようなメッセージが出ていた。

`<div css="You have tried to stringify object returned from css function. It isn't supposed to be used directly (e.g. as value of the className prop), but rather handed to emotion so it can handle it (e.g. as value of css prop).">` 

## 環境
* react 17.0.2
* @storybook/react 6.3.9
* @emotion/react 11.4.1
* @emotion/babel-preset-css-prop 11.2.0

## 解決方法
1. `yarn add @emotion/babel-preset-css-prop` を実行する (2021/11/1追記：[Create React Appでejectせずにjsx pragma無しのEmotionを使う（TypeScript編）](https://qiita.com/xrxoxcxox/items/17e0762d8e69c1ef208f)によれば、babel-preset-css-propよりもbabel-pluginの方が推奨らしい。)
2. `.storybook/main.js`を次のように編集する

```..storybook/main.js
module.exports = {
  "stories": [
  //自由に編集
  ],
  "addons": [
  //自由に編集
  ],
  webpackFinal: (config) => {
    config.module.rules.push({
      test: /\.(js|jsx)$/,
      loader: require.resolve('babel-loader'),
      options: {
        cacheDirectory: true,
        presets: [require.resolve('@emotion/babel-preset-css-prop')],
      },
    });
    return config;
  },
};
```

<span>3. </span>  Storybookを起動

## 解説
`Storybook Emotion React`などで検索すると、日本語記事では[React + TypeScript + emotion の環境に Storybook を導入する](https://blog.foresta.me/posts/storybook_with_react_ts/)がヒットする。これは、webpack.config.jsを.storybookに追加してオーバーライドする解決策。しかし、オーバーライドのためのカスタマイズがされているため採用しづらかった。
また、Githubでは、Emotionのissueである[babel-preset-css-prop does not work with Storybook](https://github.com/emotion-js/emotion/issues/1306)と、Storybookのissueである[Can't get emotion's css prop working inside storybook](https://github.com/storybookjs/storybook/issues/7540)が見つかった。
これらを読むと、`.storybook/main.js`にオプションを追加することでwebpack.config.jsを追記せずともwebpackの設定ができるとのこと。ところが、次のような設定では動かなかった([参考](https://github.com/emotion-js/emotion/issues/1306#issuecomment-920695390))。

```うまくいかなかったmain_1.js
module.exports = {
  //stories,addonsは省略
  babel: async (options) => ({
    ...options,
    presets: [...options.presets, '@emotion/babel-preset-css-prop'],
  }),
}
```

同様に、次のように設定しても動かなかった。([参考](https://github.com/storybookjs/storybook/issues/7540#issuecomment-675230327))

```うまくいかなかったmain_2.js
module.exports = {
  //stories,addonsは省略
  babel: (config) => {
    config.presets.push(require.resolve("@emotion/babel-preset-css-prop"));
    return config;
  },
}
```

最終的に、[ここ](https://github.com/storybookjs/storybook/issues/7540#issuecomment-796653314)を参考にすることで解決した。

``` うまくいったmain.js
module.exports = {
  //stories,addonsは省略
  webpackFinal: (config) => {
    config.module.rules.push({
      test: /\.(js|jsx)$/,
      loader: require.resolve('babel-loader'),
      options: {
        cacheDirectory: true,
        presets: [require.resolve('@emotion/babel-preset-css-prop')],
      },
    });
    return config;
  },
};
```

一応動くようにはなったが、環境次第なところがありそう。
ここで参考にした2つのissueには他にも多くの対処法が載っているので、また動かなくなったらそれらを試すのがいいと思う。特に、Storybookの方のissueは2021/10/9時点ではまだOpenなので、今後も進展がありそう。