React + TypeScript + emotion の環境に Storybook を導入する
こんにちは、 @kz_morita です。
今回は,React + TypeScript + emotion で作成している環境に対して Storybook を導入しようとして手こずった点があったのでその点について簡単にまとめます.
環境について 今回の環境は以下の通りです.
- React: 17.0.1 - TypeScript: 4.0.3 - @emotion/core: 10.1.1 - @emotion/styled: 10.0.27 また,emotion の css props を /** @jsx jsx */ という JSX Pragma を書かずに使用するために,@emotion/babel-preset-css-prop を導入しています.
webpack は,できるだけ編集したくないため, react-app-rewired と customize-cra を用いて以下のようにカスタマイズをしています.
package.json "scripts": { "start": "HTTPS=true react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-app-rewired eject", }, config-overrides.js const { override, addBabelPreset } = require('customize-cra'); module.