vagrant上でcreate-react-appのhot-reloadが効かない場合の対応

create-react-appでhot-reloadが効かずにはまったのでメモ

環境

Host OS: Windows 10
Guest OS: CentOS 7.2
create-react-app 1.5.2
Vagrant 2.0.2
Webpack 3.11.0

手順

$ create-react-app foo
$ cd foo
$ npm start
# Host OSから起動する場合、localhost:3000で普通にhot-reloadが効く
# Guest OS側にsshログインしてから起動すると、{vagrantのネットワークip}:3000でアクセスできるがhot-reloadが効かない

# その場合は環境変数に以下を設定してから起動
$ export CHOKIDAR_USEPOLLING=true
$ npm start

それでも駄目だった場合

• react, create-react-app, webpackあたりのバージョンがかなり古い
  • そもそも昔はデフォルトで有効ではなかったとのこと
• エディタのSafe write機能が有効なら無効にする（未確認）
  • JetBrainsのIDEとかにある機能らしいです
• 環境変数書き換えたくない
  • echo CHOKIDAR_USEPOLLING=true >> .env

理由

仮想環境でファイルの変更をwatchする場合の問題らしく、dockerやbabelの記事も引っかかります
box側か共有フォルダの設定次第な気もしますが確認中

ハマったポイント

• 初めてのreact(create-react-app)で原因の切り分けに時間がかかった
• 検索すると、古い記事でhot-reloadがデフォルト対応ではなかったときの記事が引っかかった

迷走してた時に手を出したもの

• npm run ejectしてwebpack.config.dev.jsのあれやこれを書き換え
• module.hotを判定して処理書き換え

if (module.hot) {
  module.hot.accept('./App', () => {
    ReactDOM.render(
      <Provider store={store}>
        <App />
      </Provider>,
      document.getElementById('root'),
    );
  });
}

参考

create-react-appをdockerを使って試したメモ
React auto reload with vagrant