最近出くわしたnpm packageのバージョントラブル

既存のnpmパッケージのバージョンアップで遭遇した2つのトラブルメモ。Webpack@4.28.2でReactアプリケーション作成時の内容になります。

devserver header error

webpak-dev-server^3.1.11から、特に設定をしていないとlocalhostでInvalid Host/Origin headerがコンソール出力されるようになった。Chrome, Firefoxの両方で表示される。

対処にはwebpack.dev.jsの設定にdisableHostCheckを追加する。

devServer: {
  contentBase: './dist',
  hot: true,
  disableHostCheck: true
}

エラーが消えない場合は、上記の設定に加えてdevServerプロパティに以下を追加してみるといいかもしれない。

headers: {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Headers': '*',
}

react-hot-loader

react-hot-loader ^4.5.0からセットアップの方法が変わった。

以前は以下のような定義をしていた。

// index.js
import React from "react";
import ReactDOM from "react-dom";
import { AppContainer } from "react-hot-loader";

import App from "./App";

const render = Component =>
  ReactDOM.render(
    <AppContainer>
        <App />
    </AppContainer>,
    document.getElementById("app")
);

render(App);

// Webpack Hot Module Replacement API
if (module.hot) module.hot.accept("./App", () => render(App));

今後は以下が推奨になる。ルートにhotの設定は不要になった。

// index.js
import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(<App />, document.getElementById('app'));

代わりにAppをhotでラップする。

// App.js
...
import { hot } from 'react-hot-loader/root';

...
export default hot(App);

これで今まで通り使用できる。