loadable-componentsのheroku対応

loadable-componentsを使用していて、Server side renderingをheroku環境で行う場合ビルドされるloadable-stats.jsonのパスが実行環境と違うため、chunkファイルが読み込めないという問題があります。

これはビルド時は​​­/tmp/build_[id]/​のようなテンポラリディレクトリに成果物が出力されるが、実際のファイルは/appの下に配置されるため、パスが参照できなくなる為です。

この為ローカルでは正常に動いても、heroku環境ではファイルの読み込みエラーが発生します。

import * as path from 'path';
import { ChunkExtractor } from '@loadable/server';

export const statsFile = path.resolve('./dist/loadable-stats.json');

export const nodeExtractor = new ChunkExtractor({
  statsFile
});

これを回避するには、ChunkExtractorのオプションにpublicPath、outputPathを明示的に指定します。
通常この設定はloadable-stats.jsonの指定を参照するのですが、オプションを指定してあげるとそちらを使用します。

import * as path from 'path';
import { ChunkExtractor } from '@loadable/server';

export const statsFile = path.resolve('./dist/loadable-stats.json');

export const nodeExtractor = new ChunkExtractor({
  statsFile,
  publicPath: path.resolve('./dist/'), // statsファイルのpublicPathの代わり
  outputPath: path.resolve('./dist/'), // statsファイルのoutputPathの代わり
});

こうすることで、サーバー側でchunkファイルを読み込めるようになるので、正常にレスポンスを返せるようになります。