3

I'm migrating a project from Sprockets to Webpacker.

One of the last thing I can't seem to get running correctly are notifications.

I used to be able to do : $.notify('Test') but now I'm getting 

Uncaught TypeError: $.notify is not a function

I get the same error when I try to do this in the browser console, while before it worked fine.

This is my application.js file:

require("@rails/ujs").start();
require("turbolinks").start();
require("@rails/activestorage").start();
import 'bootstrap';
import 'bootstrap-notify';

I also tried require on bootstrap-notify but that doesn't make any difference.

Environments.js

const { environment } = require('@rails/webpacker')
const erb = require('./loaders/erb')
const coffee =  require('./loaders/coffee')

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

environment.config.set('resolve.alias', {jquery: 'jquery/src/jquery'});

environment.loaders.prepend('coffee', coffee);
environment.loaders.prepend('erb', erb);
module.exports = environment;

If I put the bootstrap-notify.js file in the assets/javascripts folder and include it like this:

    = javascript_include_tag 'bootstrap-notify', 'data-turbolinks-track': 'reload'

It works without any issue.

rept
  • 2,086
  • 1
  • 26
  • 44

1 Answers1

0

Finally got it working.

bootstrap-notify is an old package that doesn't do any export but just enables functions on $ ($.notify).

In order for this to play nice with Webpacker you can install script-loader

yarn add script-loader

And then add this to your application.js file (under webpack dir)

require("script-loader!bootstrap-notify");

This will evaluates the code in the global context. Make sure the code is minified because Webpack won't do that for you.

rept
  • 2,086
  • 1
  • 26
  • 44