React関連パッケージのバージョンによって起こる問題

npmのパッケージは気が向いたときにアップデートしているのですが、まれにアップデートをしたせいでこれまでどおりに動かなくなることがあります。現在、React関係のパッケージで起こっている問題を参考までに載せておきます。もしかするとWindows環境だけで起こる問題で、MacやLinux上では起こらないかもしれませんのであしからず。

eslint-plugin-jsx-a11yのバージョンが5.1.1より上の場合エラーが出る。コードをルールに沿って正しく記述するためのチェック用パッケージなのですが、6.0.2にアップデートすると以下のエラーが出るようになってしまいました。

definition for rule 'jsx-a11y/href-no-hash' was not found

5.1.1に戻すとエラーが出なくなります。

npm install eslint-plugin-jsx-a11y@5.1.1 --save-dev

※ 2017/11/23 追記:eslint 4.11.0, eslint-config-airbnb 16.1.0, eslint-plugin-jsx-a11y 6.0.2 の環境ではエラーが出なくなっています。もう最新版にしても問題ありません。

 

webpackをインストールする際にfsevents絡みでエラーが出てしまう。ルートの権限でインストールしてくださいと出るのですが、その際、毎回 fsevents 絡みのエラーが出ます。

npm ERR! Please try running this command again as root/Administrator.

npmのバージョンを5.0.4に戻すとエラーが起きません。

npm install -g npm@5.0.4

※ 2018/1/10 追記:npm@5.6.0 で改善したようです。もしエラーメッセージが出る場合は、クリーンインストールしてくださいとのことです。

 

webpackでbuildする際にファイルを圧縮することができない。久しぶりにファイルを圧縮してみようと思い、プロダクション版でファイルを出力しようとしたところ、uglifyが正常にできなくなっていました。

Uglify SyntaxError: Unexpected token: punc ())

上記のエラーが表示されます。調べてみたところ、ES6絡み?で圧縮ができなくなっているようです。webpackに備え付けられているuglifyだと動かないようなので、パッケージ uglify-js(バージョン2)& uglifyjs-webpack-plugin(最新のβバージョン)をインストールして利用してみたところ圧縮が可能になりました。

npm install uglify-js@2 --save-dev
npm install uglifyjs-webpack-plugin@1.0.0-beta.2 --save-dev

同じエラーで悩んでいる方がおられましたら参考にしてください。

※ 2018/1/10 追記:現在は webpack 付属の UglifyJsPlugin で正常に動作しています。uglify-js と uglifyjs-webpack-plugin は必要ありません。

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)