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

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.