LoginSignup
6

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-03-27

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6