webpack v3からv4へアップデートした時に発生したエラーと対応

いつものやっていきますよ〜

先日webpack4が正式リリースされましたね。

create-react-appやangular-cliを使っている場合はバージョンアップしやすいですが、それらを使わずwebpack.configをゴリゴリしている方は、例のごとくバージョンアップに伴うエラーと格闘しているかと思います。

という事で、私がwebpack v3からv4にアップデートする際に発生したエラーと、その対応をまとめておきます。

yarn start時に起きたエラー

The 'mode' option has not been set

エラーメッセージ

WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment. 

webpack v4からwebpackコマンド実行時にmodeオプションの指定が必須になりました。

対応

公式サイトに詳細が書かれているので、ご覧下さい。
https://webpack.js.org/concepts/mode/#src/components/Sidebar/Sidebar.jsx

一例ですが、以下のように指定します。

"watch": "webpack --mode development --watch --progress --color",
"build": "webpack --mode production --progress --color",

Cannot read property 'eslint' of undefined

エラーメッセージ

Module build failed: TypeError: Cannot read property 'eslint' of undefined
    at Object.module.exports (/Users/tree/go/src/tree-maps-go/node_modules/eslint-loader/index.js:148:18)

対応

エラーの原因はよく解っていませんが、以下の対応で直るようです。

github.com

new webpack.LoaderOptionsPlugin({ options: {} })

loader._compilation.applyPluginsWaterfall is not a function

エラーメッセージ

ERROR in ./node_modules/css-loader?importLoaders=1!./node_modules/postcss-loader??ref--6-2!./client/src/assets/css/app.sass
Module build failed: TypeError: loader._compilation.applyPluginsWaterfall is not a function
    at /Users/tree/go/src/tree-maps-go/node_modules/postcss-loader/index.js:122:43
    at <anonymous>

対応

github.com

私の場合は以下のようにバージョンアップする事で直りました。

"postcss-loader": "^1.3.0",
↓
"postcss-loader": "^2.1.3",

実行時エラー

Uncaught TypeError: configureStore_default(...) is not a function

エラーメッセージ

Main.js:24 Uncaught TypeError: configureStore_default(...) is not a function
    at Object../client/src/assets/js/Main.js (Main.js:24)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:68
    at bootstrap:68

対応

これはwebpack v4関係ないかもしれません。

単にexport defaultを使ってしまっているコードがあったので、そこでエラーになっていただけでした。

以下のように修正する事で直ります。

import configureStore from './store/configureStore'

export default function configureStore(initialState) {
    return createStoreWithMiddleware(rootReducer, initialState);
}
↓
import {configureStore} from './store/configureStore'

export function configureStore(initialState) {
    return createStoreWithMiddleware(rootReducer, initialState);
}

production build

webpack.optimize.UglifyJsPlugin has been removed

エラーメッセージ

Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.

対応

qiita.com

webpack v4からUglifyJsPluginが無くなり、代わりにmode=productionにすると、自動的にuglifyされるようになります。

雑感

で、webpack v4でコンパイル速くなった？と聞かれると、正直「う〜〜〜〜〜〜ん・・・」という感じです。

効果の程は体感としては全く差を感じませんが、ビルドに関わるものは常に最新バージョンを使っておきたいですよね。Gradleなんかもそうです。

v3からv4対応は、v2からv3への対応の時より遥かに易しいので、「また地獄見たくねーよ！」という方は、多分あの時より簡単にバージョンアップできると思いますので、サクッとバージョンアップしちゃいましょう！！