Rails6 での Toastr の使い方

Question

前提・実現したいこと

Ruby on Rails 6 (webpack, webpacker)で Toastr を使えるようにしたい

質問では、試しにhtmlに直接記載してますが、最終的には**.js.erbなどでAjaxを利用する場合も含めて使う予定です。

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

コンソールのエラー表示です。Toastr がうまくロードできません（たぶん）

ReferenceError: toastr is not defined
    <匿名> http://localhost:3000/users:415

該当のソースコード

index.html.erbの最下部に下記を追加して試してます。JQueryには問題ありませんでした。

<%= link_to '＋', new_users_path %>

<h1>JQuery</h1>
<p id="hoge">JQueryが使えるか確認</p>

<script>
  $("#hoge").css("color","red");
  toastr.info('info型のトーストの表示');
</script>

試したこと

yarn add jquery
yarn add toastr

の後に
./app/javascript/packs/application.js
へ

require("jquery")
require("toastr")

を追加してます

回答に応答する追記

config/webpack/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', 'default'],
      Toastr: 'toastr'
    })
    )

module.exports = environment

./app/javascript/packs/application.jsを次のように追記

import toastr from 'toastr';
window.toastr = toastr;

補足情報（FW/ツールのバージョンなど）

ruby on rails 6 (on Docker)

Answer 1

app/javascript/src/application.scssに以下の内容を追記したらうまくいきました。

@import '~toastr/toastr';

Answer 2

Webpackerに書いたものは、デフォルトでWebpack内にローカルなものとなりますので、ビューに書いた<script>からそのままでは使えません。方法は2つ考えられます。

• Webpackと無関係にtoastrを読み込む（Webpack側で使いたい場合にはexternalsを使うことで共用可能）
• Webpack内でwindow.toastr = toastr;のようにwindow経由でエクスポートする

Comments

[NCC1701]

ありがとうございます。
'info型のトーストの表示'が一定時間表示された後に消えるというところまでたどり着きました。（変更内容はここではインデントが効かないので質問事項に追記しました）
ただし「ただの文字列」が表示されるだけでcssが適用されませんでした。（jqueryは適用された？）
まだ、書き足りないファイルがあるようなのですが、どこをいじれば良いのか、参考になるサイト等がありましたら教えてください。