【Storybook】GoogleMapAPIキーが必要なページ

StorybookでGoogleMapを表示しているページのプレビューを行いたい

ReactプロジェクトでGoogleMapを表示している

uga-box.hatenablog.com

        <GoogleMapReact
          bootstrapURLKeys={{ key: /* YOUR KEY HERE */ }}
          defaultCenter={this.props.center}
          defaultZoom={this.props.zoom}
        >

このときの/* YOUR KEY HERE */は実際は__GOOGLE_MAP_API_KEY__という変数を使っている

この変数はWebpackのDefinePluginで定義しているのでStorybookで表示しようとすると未定義のエラーがでて画面が表示されない

GoogleMap自体は表示しなくてよいが、APIキーが未定義という理由で画面が表示されない状態を解消したい

preview-head.htmlに定義する

preview-head.htmlはStorybookのプレビューのHTMLヘッドにタグを追加することができるファイル

ここに以下のように定義することで解決ができた

<script>window.__GOOGLE_MAP_API_KEY__ = "aaa";</script>