rails6からjs.cookieを使いたい

Question

前提・実現したいこと

rails6から「js.cookie」を使いたい。
gem 'js_cookie_rails' をインストールして
application.jsにrequireを追加しました。

発生している問題・エラーメッセージ

application.jsのrequire行で見つからないと言われます。

Uncaught Error: Cannot find module 'js.cookie'

該当のソースコード

\app\javascript\packs\application.js

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import '../stylesheets/style.css'

var jQuery = require('jquery')
global.$ = global.jQuery = jQuery;
window.$ = window.jQuery = jQuery;

//↓ここででエラー
require ('js.cookie') 
//import "js.cookie"　//これも駄目
//import Cookies from 'js.cookie' //これも駄目
//equire('js-cookie/src/js.cookie') //これも駄目
//window.Cookies = require('js-cookie/src/js.cookie') //これも駄目



Rails.start()
Turbolinks.start()
ActiveStorage.start()

試したこと

import や　js-cookie/src/js.cookieに変えても同じでした。
分かる方教えていただけないでしょうか？
宜しくお願いします。

追記

CDNだと動作したので
gemからのインストールが怪しいです。
なのでgem list
したところ見当たりませんでした。
そもそもjs-cookie以外も見当たらないものが多かったです。
bundle installが失敗してるのでしょうか？

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '3.0.0'
gem 'rails', '~> 6.1.0'

gem 'puma', '~> 5.0'
gem 'sass-rails', '>= 6'
gem 'webpacker', '~> 5.0'
gem 'turbolinks', '~> 5'
gem 'jbuilder', '~> 2.7'
gem 'bcrypt', '~> 3.1.7'
gem 'bootsnap', '>= 1.4.4', require: false
gem 'aasm'
gem 'will_paginate'
gem 'bootstrap-will_paginate'
gem 'rails-i18n'
gem 'font-awesome-rails'
gem 'public_uid'
gem 'bundle_outdated_formatter'
gem 'carrierwave'
gem 'mini_magick'
gem 'js_cookie_rails'



group :development, :test do
  gem 'sqlite3', '~> 1.4'
  gem 'byebug', platform: :mri
  gem 'shoulda-matchers'
  gem 'faker'
end

group :development do
  gem 'web-console', '>= 4.1.0'
  gem 'listen', '~> 3.3'
  gem 'spring'
  gem 'spring-watcher-listen'
  gem 'pry-rails'
  gem 'pry-byebug'
  gem 'rack-mini-profiler', '~> 2.0'
end

group :test do
  gem 'rails-controller-testing'
  gem 'minitest-reporters'
  gem 'guard'
  gem 'guard-minitest'
  gem 'rspec-rails'
  gem 'factory_bot_rails'

  gem 'capybara', '>= 3.26'
  gem 'launchy'
  gem 'selenium-webdriver'
  gem 'webdrivers'
  gem 'rack_session_access'
end

group :production do
  gem 'pg'
  gem 'fog-aws'
end

gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

gem listした結果

*** LOCAL GEMS ***

abbrev (default: 0.1.0)
base64 (default: 0.1.0)
benchmark (default: 0.1.1)
bigdecimal (default: 3.0.0)
bundler (2.2.4, default: 2.2.3)
cgi (default: 0.2.0)
csv (default: 3.1.9)
date (default: 3.1.0)
debug (default: 0.1.0)
delegate (default: 0.2.0)
did_you_mean (default: 1.5.0)
digest (default: 3.0.0)
drb (default: 2.0.4)
english (default: 0.7.1)
erb (default: 2.2.0)
etc (default: 1.2.0)
fcntl (default: 1.0.0)
fiddle (default: 1.0.6)
fileutils (default: 1.5.0)
find (default: 0.1.0)
forwardable (default: 1.3.2)
getoptlong (default: 0.1.1)
io-console (default: 0.5.6)
io-nonblock (default: 0.1.0)
io-wait (default: 0.1.0)
ipaddr (default: 1.2.2)
irb (default: 1.3.0)
json (default: 2.5.1)
logger (default: 1.4.3)
matrix (default: 0.3.1)
minitest (5.14.2)
mutex_m (default: 0.1.1)
net-ftp (default: 0.1.1)
net-http (default: 0.1.1)
net-imap (default: 0.1.1)
net-pop (default: 0.1.1)
net-protocol (default: 0.1.0)
net-smtp (default: 0.2.1)
nkf (default: 0.1.0)
observer (default: 0.1.1)
open-uri (default: 0.1.0)
open3 (default: 0.1.1)
openssl (default: 2.2.0)
optparse (default: 0.1.0)
ostruct (default: 0.3.1)
pathname (default: 0.1.0)
power_assert (1.2.0)
pp (default: 0.1.0)
prettyprint (default: 0.1.0)
prime (default: 0.1.2)
pstore (default: 0.1.1)
psych (default: 3.3.0)
racc (default: 1.5.1)
rake (13.0.3)
rbs (1.0.0)
rdoc (default: 6.3.0)
readline (default: 0.0.2)
readline-ext (default: 0.1.1)
reline (default: 0.2.0)
resolv (default: 0.2.0)
resolv-replace (default: 0.1.0)
rexml (3.2.4)
rinda (default: 0.1.0)
rss (0.2.9)
securerandom (default: 0.1.0)
set (default: 1.0.1)
shellwords (default: 0.1.0)
singleton (default: 0.1.1)
stringio (default: 3.0.0)
strscan (default: 3.0.0)
syslog (default: 0.1.0)
tempfile (default: 0.1.1)
test-unit (3.3.7)
time (default: 0.1.0)
timeout (default: 0.1.1)
tmpdir (default: 0.1.1)
tracer (default: 0.1.1)
tsort (default: 0.1.0)
typeprof (0.11.0)
un (default: 0.1.0)
uri (default: 0.10.1)
weakref (default: 0.1.1)
yaml (default: 0.1.1)
zlib (default: 1.1.0)

インストールした手順
gemfile追加後、
「bundle install」
しました。特にエラーなく終わってたと思います。
※npmからはインストールしてません。

追記

gem list間違ってグローバルを見てました。
ローカルを見ると、js-cookie含む全てインストールされてました。

Comments

[m.ts10806]

gem list　でインストール済みであることは確認しましたか？

[pecchan]

有難う御座います。
gemからインストールされてないっぽいと思い、
今まさにそれをやってました。

[pecchan]

gem listに見当たりませんでした。
ですがGemfileに記載してる他のwebpackerやcarrierwaveなんかも見当たりません。
全部入ってないということなんでしょうか？
Gemfile.lockには存在してたので安心してたのですが・・・。

[m.ts10806]

実行したコマンドとかどこに書いたとか、具体的にインストール手順記載したほうがいいかもしれません

[pecchan]

はい。gemfileも追記させていただきます。
アドバイス有難う御座います。

[m.ts10806]

ちなみに、bundle installの実行結果はどうだったんでしょう

[m.ts10806]

>しました。特にエラーなく終わってたと思います。
コメントした後に気づきました。失礼。

[m.ts10806]

ちょっとやってみたら、インストール成功してもgem listでは出てこないですね。

[pecchan]

わざわざ試していただき、すみません。有難う御座います。
うーん・・・・
gemfileを作り直してbundle installし直す方法調べてました。

[m.ts10806]

ただ、
require("js.cookie")
と書いただけでいけました。
（このケースでシングルクォーテーションとダブルクォーテーションは違いはないと思います）

[m.ts10806]

ただ、、前の質問は解決したわけではなかったということですよね。
https://teratail.com/questions/314675

[pecchan]

試していただき有難う御座います。
シングルクォーテーションとダブルクォーテーション、一応両方試してみました。

前の質問ですが、一応CDNじゃ動作したので解決済みにさせていただきました。
で今回はCDN部分をコメントアウトして、gemをインストールしたらこのような現象になりましたorz

[pecchan]

書いてて思ったのですが、
後にgemで入れた部分を見に行かず、先のCDNで入れてた部分を見に行ってるとかあるんでしょうか？

[m.ts10806]

悩むところではありますね。
jQuery本体などもそうですが、ライブラリやプラグインなど、本体ソースをいじるようなことがなく、
ネットにつなげないユーザーが利用するような環境を想定していないのであれば、CDNで十分に思います。
他のGemが問題なく使えてるなら尚更ですね。

[m.ts10806]

>先のCDNで入れてた部分を
どこに書いたのか知らないですが、書き方次第です。
フロント側のコードを調整した場合、毎回キャッシュクリア試した方がいいです。

[pecchan]

はい、プラグイン少し悩みました。。。
これはgemから、これはCDNから、と散見すると保守的に面倒だなと思い。
統一できればと思った次第です。
貴重なアドバイス有難う御座います。
今日解決できなければCDNでいきます。

[pecchan]

書き方次第なんですね。
詳しくないので普通に<head>内に
<script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>
としてました。※こういう事でなかったらすみません

「キャッシュクリア」試してみます！
まず方法が分からないので調べつつやってみます。
また結果を記載させていただきます！

[m.ts10806]

><head>内に
はい。外部サービスURLへのリンクなのでscriptタグに直書きで良いです。
gitからダウンロードして直に配置しても良さそうですけどね。
https://github.com/js-cookie/js-cookie
結局は「そういう機能が書かれているjsファイル」なので。

[pecchan]

キャッシュクリア試してみました。
以下３つ流してみました。
rake tmp:cache:clear
bundle exec rails tmp:clear
bundle exec rails r 'Rails.cache.clear'

ですが現象変わりませんでした（泣）

以上、報告まででした！
有難う御座います！