Here are the steps to add toastr with the webpack.
1) Add toastr js with yarn from terminal
2) Require toastr in app/javascript/packs/application.js
global.toastr = require("toastr")
3) Create app/javascript/stylesheets/application.scss file to import custom or library css files
4) Import toastr css in app/javascript/stylesheets/application.scss
5) Import app/javascript/stylesheets/application.scss file in app/javascript/packs/application.js
import "../stylesheets/application"
6) Add the following code in layouts/application.html.erb
<% unless flash.empty? %>
<script type="text/javascript">
<% type = f[0].to_s.gsub('alert', 'error').gsub('notice', 'info')..gsub('notice', 'success') %>
toastr['<%= type %>']('<%= f[1] %>');
7) Let’s use the controller file
@blog = Blog.new(blog_params)
format.html { redirect_to @blog, flash: {success: 'Blog Created Successfully'}}
format.html { render :new }
Toastr understands error or is it successful, we are replacing flash’s alert and notice keys with error and success respectively.