0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【Rails】使用環境・記述は間違っていないのにjQueryが動作しない

Last updated at Posted at 2022-04-09

はじめまして。
まだ学習を始めて間もないので間違っていたらぜひ教えてください。

対象の方

GitHub上にjQueryが使えるアプリを作成済みで、
それをcloneしたからjQueryが動く環境なはずなのに動かないって方。
ちょっと特殊?です。
(インストール方法や使い方の説明ではありません)

環境

Rails: 6.1.4
Ruby: 2.6.3
ローカル環境 (AWS cloud9)

経緯

GitHubからすでに動作するアプリをcloneしてきた際に起こった問題です。
*cloneした元々のディレクトリにはjQueryもインストール済みです。
(cloneしてからwebpackをinstallやらcompileしてから使っています)

環境・記述が間違っていないというのは、
毎回全く同じ方法で同じディレクトリをGitHubからローカルへcloneしてきているからです。
前まではその方法で問題なく動いていたのでそこは間違いないです!

解決策?

なぜなのかわかりませんが、app/config/webpack/environment.js
(いつもjQueryの記述がしてあるところ)の記述の順番を入れ替えたら直りました。

元の記述↓↓

environment.js
const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    Popper: 'popper.js'
  })
)

module.exports = environment  //これを上に持っていくだけ

変更した記述↓↓

environment.js
const { environment } = require('@rails/webpacker')

module.exports = environment  //ここに!

const webpack = require('webpack')
environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    Popper: 'popper.js'
  })
)

は?って感じですがこれだけでした。

あと必要なのかわかりませんが一応jQueryの動作が確認できたら元の位置に戻すようにしています。
(戻してもきちんと動作はしています!)

原因は?

わからないので完全に憶測です。
jQuery動かない????と思ってctl+cでサーバー落とした際に、直前のターミナル上にcompiling ~ 的なことがちらっと見えた気がするので、

rails s

何らかが原因でcompileが完全にはされない
(すぐサーバー落としたわけじゃなく、しばらく待っても使えなかったので時間の問題ではないと思います)

compileされなかったためjQueryが使えない

environmentの記述に変更を加える(順番の入れ替え)

変更点があったため新たにcompileしてjQuery読み込んでくれた?
とざっくりと考えています。

最後に

順番入れ替えるだけなので、もしダメでもその後に影響がないと思います。
もしみなさんも同じ状況でしたらぜひ一度お試し下しさい。

拙い文章で分かりづらい点があったかと思いますが、
お読みいただきありがとうございました!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?