Develop Reference

jQuery not being loaded in Webpack

I am in the process of moving my entire application.js application into smaller page bundles using SplitChunks. In my users/show.html.erb page I am using the following tag to import the specific chunk.
<%= javascript_packs_with_chunks_tag 'users/show' %>
From the looks of my source code when I inspect it there are several bundles included such as the application.js file that includes jquery like this...
import "bootstrap"
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
require("jquery")
I am just testing the page to see if jquery is being loaded. My users/show.js code looks like this:
import "chartkick"
import "chart.js"
window.onload = function() {
if (window.jQuery) {
// jQuery is loaded
alert("Yeah!");
} else {
// jQuery is not loaded
alert("Doesn't Work");
}
}
When I load the page I do see a Doesn't Work alert pop up indicating that jQuery has not been loaded. I'm newer to webpack so perhaps I have some misconfiguration somewhere, but if jquery is being loaded at the application.js level, why would my other pack not be able to listen to use jquery? Is this a problem with the dependency graphs?
My environment is as follows:
environment.js
const { environment } = require('#rails/webpacker');
const webpack = require('webpack');
environment.plugins.append('Provide', new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
}));
const config = environment.toWebpackConfig();
config.resolve.alias = {
jquery: 'jquery/src/jquery'
};
environment.splitChunks()
module.exports = environment;

I don't see where you add jQuery alias to your global (window) object. So you have to add it as below:
global.jQuery = jQuery; // This is a alias you defined in `ProvidePlugin`;
// window.jQuery = jQuery // also works
// Or you can add directly via your required object
const jquery = require('jquery');
global.jQuery = jquery;

I invariably get this issue and here is the two lines which makes it working for me
// https://stackoverflow.com/q/54905026/398863
window.jQuery = $;
window.$ = $;

Receiving Uncaught TypeError: Cannot read property 'fn' of undefined and TypeError $(...).daterangepicker is not a function Webpack Rails 6

I added the daterangepicker package with yarn to my rails 6 project with webpacker as the dependency management system for JS. The issue I am having is that jQuery itself works and is defined. But, daterangepicker is not being initialized correctly. How can I get daterangepicker to work correctly with webpacker?
application.js
window.jQuery = $;
window.$ = $;
import {} from 'jquery-ujs'
import "./semantic.min"
.....
...
import moment from 'moment';
window.moment = moment;
require("daterangepicker");
require("#rails/activestorage").start();
require("channels");
environment.js
const {environment} = require('#rails/webpacker');
const webpack = require('webpack')
environment.plugins.prepend('Provider',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery',
jquery: 'jquery', 'window.jQuery': 'jquery',
moment: 'moment'
})
);
module.exports = environment;

Bootstrap-notify with webpacker under Rails returning $.notify is not a function

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.

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.

Rails 6 webpacker. Js plugins not working

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?

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';

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

How to add jquery third party plugin in rails 6 webpacker

I know its simple but with update of rails 6. there is new syntax in rails 6 for manage javascript assets which is maintained by webpacker.
//application.js
require("#rails/ujs") //.start()
require("turbolinks").start()
require("#rails/activestorage").start()
require('jquery').start()
require('jquery_ujs').start()
require('bootstrap-daterangepicker').start()
require("custom/custom").start()
require("bootstrap").start()
require("channels")
i am able to add custom/custom but bootstrap and jquery is not working
i have install jquery and bootstrap via npm

run below command to add jQuery.
$ yarn add jquery
Add below code in config/webpack/environment.js
const webpack = require('webpack')
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery'
})
)
Require jquery in application.js file.
require('jquery')
No more need to add jquery-rails gem!

to resolve jquery third party plugin issue add jquery via yarn
yarn add jquery
for adding jquery support in rails 6 application first we need to add below configuration
# app/config/webpack/environment.js
const {environment} = require('#rails/webpacker');
const webpack = require('webpack');
environment.plugins.append('Provide', new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery' # or if its not work specify path `'jquery/src/jquery'` which node_modules path for jquery
}));
module.exports = environment;
for import any jquery related plugin in app/javascripts/packs/application.js
use below instructions
import 'bootstrap/dist/js/bootstrap';
import 'bootstrap-daterangepicker/daterangepicker'
updated with expose-loader for jQuery
yarn add expose-loader
Then add this to config/webpack/environment.js
environment.loaders.append('jquery', {
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: '$',
}, {
loader: 'expose-loader',
options: 'jQuery',
}],
});
module.exports = environment;

Apparently expose-loader 1.0.0 has a different format:
environment.loaders.append('jquery', {
test: require.resolve('jquery'),
rules: [
{
loader: 'expose-loader',
options: {
exposes: ['$', 'jQuery'],
},
},
],
});

Ensure you have yarn installed and updated to the latest version, then create your rails application.
First Run the following command to install Bootstrap, Jquery and Popper.js
yarn add bootstrap#4.5 jquery popper.js
On the above ofcourse you can change to the latest version of Bootstrap.
If you open package.json file, you will notice Bootstrap 4.5, Jquery latest version and Popper.js latest versions have been added for you.
Next go to config/webpack/environment.js and amend the file.
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
Next go to app/assets/stylesheets/application.css and amend the file make sure to require bootstrap.
*= require bootstrap
*= require_tree .
*= require_self
Finally go to application.js file and amend the file by adding import 'bootstrap'; in order for bootstrap javascript to work.
import 'bootstrap';
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
Save all changes, restart rails server.
That should work.

In webpacker v. 6 there is no config/webpack/environment.js and other files structure
Firstly you need add JQuery to your project using yarn:
yarn add jquery
After that you can integrate JQuery using one of ways:
Directly update base config:
// config/webpack/base.js
const { webpackConfig } = require('#rails/webpacker')
const webpack = require('webpack')
webpackConfig.
plugins.
push(
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
)
module.exports = webpackConfig
Use custom config and merge it to base config:
// config/webpack/base.js
const { webpackConfig, merge } = require('#rails/webpacker')
const customConfig = require('./custom')
module.exports = merge(webpackConfig, customConfig)
// config/webpack/custom.js
const webpack = require('webpack')
module.exports = {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
]
}
On my opinion second way is more flexible