Rails 6 webpacker。 Js插件不起作用

Question

I am using Rails 6. I am having problems with getting js plugins working. I am trying to add toastr.js.

This what I have tried

yarn add toastr

This is how my application.js file look

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('bootstrap')
require("jquery-ui")
require("packs/adminlte")
require("bootstrap-datepicker")
require("toastr/toastr")

This is how my environment.js file looks like

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

const webpack = require('webpack');

environment.plugins.append('Provide', new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']
}));

module.exports = environment;

If I use cdn or run the js code at toastr/toastr (node modules) in browser console everything works.

What am I missing?

Answer 1

Follow below steps to use toastr JS in rails app with webpacker:

• Add toastr with yarn: yarn add toastr

• In your application.js:

   import toastr from 'toastr'; toastr.options = { "closeButton": true .... add options here ... }; global.toastr = toastr;

OR

toastr = require("toastr")

OR

import toastr from 'toastr/toastr';

Answer 2

Try import toastr from 'toastr/toastr'; It worked for me.