create-react-app(ver2)でTypeScriptとStoryBookを使う

概要

create-react-app(react-scripts)は2018年10月のversion2.0系のリリースからCSS-Modulesが公式サポートされています。
さらに、2018年11月のversion2.1系のリリースからTypeScriptも公式サポートされています。
なので、version1系の時と違ってejectなどの特別なことをしなくてもCSS-ModulesやTypeScriptを割と簡単に導入できるようになっています。

当記事では、執筆時点(2019-01-20)で最新バージョン(2.1.3)のcreate-react-appを使って公式ドキュメントに従ってTypeScript等の設定を追加し、確認用のサンプルコンポーネントをStoryBookで表示できるところまでやってみた知見の共有になります。

参考：create-react-app(adding-a-sass-stylesheet)
参考：create-react-app(adding-typescript)
参考：create-react-app(developing-components-in-isolation)

参考：CSSモジュール ― 明るい未来へようこそ
参考：StoryBook

執筆時（2019年01月20日）のバージョン

	version
create-react-app	2.1.3
storybook	4.1.7

$ grep \"react-scripts\" package.json
    "react-scripts": "2.1.3"

$ sb --version
4.1.7

やったこと

※下記手順以外にもエラーの解消のためにひとつだけ追加で実施したことがあります。その内容については、最後の「【補足】AP起動時にエラー！？」に書いてあります。

・SASS,TypeScript,StoryBookを追加

公式ドキュメント（「概要」に書いてあるリンク先参照）に書いてある通りにcreate-react-appから生成したAPの初期状態に対してSASS、TypeScript、StoryBookの設定を追加しただけ。

npx create-react-app my-app
cd my-app
yarn add node-sass
yarn add typescript @types/node @types/react @types/react-dom @types/jest
npx -p @storybook/cli sb init

・サンプルコンポーネントの追加

TypeScriptやCSS-Modulesで書いたコンポーネントがちゃんと動くか確認するためのコンポーネントを作成します。
Sample.tsxがTypeScriptで実装したコンポーネントです。
tsxファイル以外はCSS定義で、CSS-ModulesやSASSの書式を使ってみてます。

＜sampleコンポーネント関連ファイルリスト＞

Sample.tsx
Sample.css
Sample.module.scss
Sample.scss
Variables.scss

＜Sample.tsx＞

import React from 'react';

// style with normal css
import './Sample.css';
// style with sass
import './Sample.scss';
// style with CSSModules(with sass style)
import style from './Sample.module.scss';
// define variable with type.
const sampleStr: string = 'CSS-Modules and SASS-Style';
// enum of Typescript
enum SampleEnum {ENUM1, ENUM2};

const Sample = () => (
  <div>
    {/* Sampleコンポーネントに閉じた".sample"CSSクラスの定義 */}
    <div className="sampleStyle">Normal-CSS</div>
    <div className="sass sassSampleStyle">SASS-Style</div>
    <div className={style.sassSampleStyle}>{sampleStr} : {SampleEnum[0]}</div>
  </div>
);

export default Sample;

＜Sample.module.scss＞

@import './Variables.scss';

.sass {
  // SASSの文法が有効である確認のため無意味に入れ子にしてます
  &SampleStyle {
    padding: 1rem;
    background-color: $colorOfCssModules;
  }
}

サンプルコンポーネントのApp.jsとStoryBookへの追加

＜src/App.jsにSampleコンポーネントを追加＞

import Sample from './sample/Sample';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Sample />
// ～省略～ 

＜StoryBook (src/stories/index.js)にSampleコンポーネントを追加＞

import Sample from '../sample/Sample';
// ～省略～ 
storiesOf('Sample', module)
  .add('Sample', () => <Sample />);

確認する

AP本体はyarn startコマンドで起動できます。

StoryBookはyarn storybookコマンドで起動できます。

どちらも、追加したSampleコンポーネントが問題なく表示できてますね！
ソースはgithubにもアップしています。よかったらgit cloneして実際に動かしてみて下さい。
https://github.com/kinocoffeeblack/my-create-react-app-with-storybook-ts

【補足】AP起動時にエラー！？

基本的には"やったこと"に書いたやり方で行けるはずでしたが、今回は最初の"yarn start"での起動時に下記のようなエラーで起動が失敗してしまいましたので、ひと手間追加してます。

$ yarn start
yarn run v1.12.3
$ react-scripts start

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "babel-loader": "8.0.4"

Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-loader was detected higher up in the tree:
... 

Version2.1.3のcreate-react-appが"babel-loader"の"8.0.4"を必要とする一方で、StoryBookの設定を追加したときに"^8.0.5"のバージョン指定がpackage.jsonに追加されるので、不整合が起きているようでした。

ひと手間内容

エラーメッセージ内容を手掛かりに下記の変更を行ってみたところ、とりあえずはエラーは解消できました。

• package.jsonの"devDependencies"に設定されていた"babel-loader"のバージョン指定を"^8.0.5"から変更して"8.0.4"に固定

  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@storybook/addon-actions": "^4.1.7",
    "@storybook/addon-links": "^4.1.7",
    "@storybook/addons": "^4.1.7",
    "@storybook/react": "^4.1.7",
    "babel-loader": "8.0.4" ←コレ！
  }

• "yarn.lock"ファイルをいったん削除
• "yarn install"のやり直し

おそらくこの問題は一時的なもので、近い将来のcreate-react-appのマイナーバージョンアップ等で改善されるのかなと思ってます。
改善されたら（改善されたことに自分で気付けたら）この記事も修正しておきますね。