react-hot-loaderを最新版にアップデートしようとして右往左往したメモ
完全に右往左往した時のメモなので脈絡がないです.
Appコンポーネントが別ファイルに分けられてなくて警告が出ていました. それを直したかったのです.
gaearon/react-hot-loader: Tweak React components in real time. を読んで, どうせ構造を変えるなら最新版準拠にしたいなと思いました.
react-hot-loaderを4.8.4にして,
import { hot } from 'react-hot-loader/root';
import { connect } from 'react-redux';
import Routing from 'Routing';
const App = connect(Routing);
export default hot(App);
と書いて,
(なんかconnectをdefaultでimportしててそれ忘れて1時間ぐらいハマりました…)
エントリーポイントに
import App from 'App';
として読み込みます.
Uncaught Error: You must pass a component to the function returned by connect. Instead received {}
で動きません.
patchがreact-domに当たってないという警告は
yarn add react-dom@npm:@hot-loader/react-dom
で解決しました.
公式ドキュメントやネットの情報は4のmoduleを使う方法どころか3のAppContainerを使うことを前提の情報で全く参考にならない.
公式ドキュメントが参考にならないってどうなんですか…
公式サンプルもmoduleを使う方法で参考になりません.
3に書かれている
or import 'react-hot-loader' in your main file (before React)
を試してもうまくいきません.
Appをユーザのコンポーネントだから最後にimportしているのが良くないのか?
と思ったので一番上に持っていきます.
関係なくダメですね.
2番めの
or have at least one variable in the same file (babel/webpack plugin would import react-hot-loader then)
を試してみましょう. ダメでした.
or prepend your webpack entry point with react-hot-loader/patch, which will import 'react-hot-loader', and nothing more.
を試してみましょう.
エラーも表示されなくなりましたが, 何も表示されなくなりましたね.
わからないのでソースを見ます.
react-hot-loader/hot.dev.js at master · gaearon/react-hot-loader
hotも結局内部でAppContainerを使っていることがわかりました.
よくわかりませんがこれが
Keep in mind - the same rule is applied to react-dom, as long as it would (since 16.8.6) import react internally. React-hot-loader, to prevent dependency cycles(#1209), caused by the code it injects, should be imported first.
というやつなんですかね.
しかし対処はimportを最初にするなどでしていると思うんですが…
各エントリーポイントにimportを配置するのではなく,
webpackのrulesに書き加える方法を試してみましょう.
なんかreact-hot-loaderが発狂して
TypeError: Cannot read property 'indexOf' of undefined
とかいうのが出てきましたね.
原因はconnectの再定義がアプリケーションでされてることでした. ずっとハマっていて再定義されていないものを読み込んでいました. これを正しくimportすることで無問題になりました.
hatena-bookmark