ReactでjQuery使うと出る「ESLint:’$’ is not defined. (no-undef)」エラーの直し方

  • ESLint:’$’ is not defined. (no-undef)エラーが出た
  • ReactでjQueryって使っていいの?

Reactで構築していたシステムに、ふとjQueryを入れないと実現できないような要件が発生しました。   

そもそもReactjQueryを共用してもいいのか・・?   

そんな疑問を抱えながら、とりあえず使ってみたところ、[ESLint:’$’ is not defined. (no-undef)]ってエラーが出たので、直し方とかいろいろ調べてみました。

この記事でわかること
  • ReactjQueryを共用してもいいの?
  • ESLint:’$’ is not defined. (no-undef)エラーの直し方
目次

ReactjQueryを共用してもいいの?

そもそもなんですが、ReactとjQueryを共用してもいいのか?

ざっっっくり調べた個人的解釈では、   

「使い方ちゃんとすれば別に大丈夫じゃない?」

というなんとも曖昧な感じ。 

結論から言うと、ライフサイクル等をちゃんと意識して使う分には問題ないと思います。

詳しくは以下のサイトがわかりやすかったのでご参照を。。   

注意するポイント 

「 jQuery は DOM が現れたり削除されたりするライフサイクルメソッド( componentDidMount, componentWillUnmount, componentDidUpdate )の中でだけ実行しなさい。」 

抜粋:https://recruit.gmo.jp/engineer/jisedai/blog/react-with-jquery/

かなと思ってます。 

かなり端的ですけど、理論上は納得ので可能な限りは準拠しようかと。   

ESLint:’$’ is not defined. (no-undef)のエラー解決策 

本題の解決策です

と言うことで、とりあえずやってみたら、ESLintさんに 

ESLint:’$’ is not defined. (no-undef)

と怒られました。

どうすりゃいいのか調べたら、ドンピシャで教えてくれてるブログを見つけました。 

結論から言うと解決策は単純で、.eslintrcのenvにjqueryを追加すればOKです。   

こんな感じ。 

{ 
  "env": { 
    "es6": true, 
    "browser": true, 
    "node": true, 
    "jquery": true, 
  } 
} 

※上記は例ですので、“jquery”: trueの記述さえあれば問題ありません。

いやー無知って怖い。   

[ブログ]メンチカツさん、ありがとうございます。 

ReactでjQueryを使う’$’ is not defined. (no-undef)エラーのまとめ

まとめ
  • ReactでjQueryを使っても良いが、ライフサイクル等をちゃんと意識しなければならない
  • ‘$’ is not defined. (no-undef)のエラーは“jquery”: trueとESLintのenvに追記すればOK

よかったらシェアしてね!

コメント

コメントする

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

目次
閉じる