Develop Reference

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

Webpack Encore - How to import any library (minified version if possible)?

I have some problems with webpack Encore.
I'm crrently trying to add this library to my project : https://github.com/dinbror/blazy but when i do a require on the js files(minified or not) from this library, I got this error
jquery.js:3827 Uncaught ReferenceError: Blazy is not defined
at HTMLDocument.<anonymous> (reader_init.js:215)
at mightThrow (jquery.js:3534)
at process (jquery.js:3602)
I do my require like this : require('../vendor/bLazy/blazy'); (vendor is the folder where my Bower dep are installed)
The library IS in the generated file.
So I would like to know if there is a way to require any library with webPack Encore ?
ps : For info, it worked great with a historyjs library (non minified version only, though)
require('../vendor/history.js/scripts/bundled-uncompressed/html5/jquery.history');
Here is my webpack.config.js if it can help
// webpack.config.js
var Encore = require('#symfony/webpack-encore');
Encore
// the project directory where all compiled assets will be stored
.setOutputPath('public/build/')
// the public path used by the web server to access the previous directory
.setPublicPath((!Encore.isProduction())?'/rapp/public/build':'/build')
// this is now needed so that your manifest.json keys are still `build/foo.js`
// i.e. you won't need to change anything in your Symfony app
.setManifestKeyPrefix('build')
// will create public/build/main.js and public/build/main.css
.addEntry('main', './assets/js/main.js')
//Add entry if other js/css needed. first parameter is the generated filename.
//require scss file in js. (if you addEntry for scss file only, it will create a js file with same name)
.addEntry('reader', './assets/js/reader.js')
//file upload with dropzone
.addEntry('dropzone', './assets/js/dropzone.js')
//Admin chapter js
.addEntry('admin-chapter', './assets/js/chapter.js')
//addStyleEntry : for css file only
// allow sass/scss files to be processed
.enableSassLoader()
// allow legacy applications to use $/jQuery as a global variable
.autoProvidejQuery()
.enableSourceMaps(!Encore.isProduction())
// empty the outputPath dir before each build
.cleanupOutputBeforeBuild()
// create hashed filenames (e.g. app.abc123.css)
.enableVersioning()
.createSharedEntry('vendor', [
'jquery',
])
.autoProvideVariables({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
})
.configureFilenames({
images: '[path][name].[hash:8].[ext]'
})
;
// export the final configuration
module.exports = Encore.getWebpackConfig();
EDIT SOLUTION : I saw a comment that helped me (thanks to you)
import Blazy from '../vendor/bLazy/blazy.min' works great.
I thought the required() method was an equivalent of import but seems not.

import Blazy from '../vendor/bLazy/blazy.min'
thanks to the one that commented.
ps : I didn't see how to mark as solved without any answer so I did this one to select it as answer

Bootstrap 4 Beta importing Popper.js with Webpack 3.x throws Popper is not a constructor

So Bootstrap 4 Beta is out... yey! However Tether has been replaced by Popper.js for tooltip (and other features). I saw an error thrown in the console fast enough to advise me of the change to Popper.js:
Bootstrap dropdown require Popper.js
Seems easy enough, I went and updated my webpack.config.js (the entire config can be seen here) and Bootstrap then started working (the only change I did was to replace Tether with Popper):
plugins: [
new ProvidePlugin({
'Promise': 'bluebird',
'$': 'jquery',
'jQuery': 'jquery',
'window.jQuery': 'jquery',
'window.$': 'jquery',
Popper: 'popper.js'
}),
I also did the import 'bootstrap' in my main.ts file.
However I now have another problem (which I did not have with Tether), a new error is thrown in the console:
Uncaught TypeError: Popper is not a constructor
If I try to debug in Chrome, I do have Popper loaded as an Object (which is why Bootstrap stopped complaining) as you can see in the print screen below.
Finally to include all my code. I use Bootstrap tooltip with a simple custom element built with Aurelia and TypeScript (which used to work with previous Bootstrap alpha 6 and Tether)
import {inject, customAttribute} from 'aurelia-framework';
import * as $ from 'jquery';
#customAttribute('bootstrap-tooltip')
#inject(Element)
export class BootstrapTooltip {
element: HTMLElement;
constructor(element: HTMLElement) {
this.element = element;
}
bind() {
$(this.element).tooltip();
}
unbind() {
$(this.element).tooltip('dispose');
}
}
Looks like I did not import Popper correctly, if so then what is the best way to achieve that with Webpack 3.x?

While browsing Bootstrap 4 documentation. I actually found a section about Webpack which explains how to install it correctly. Following the Bootstrap - installing with Webpack documentation, the answer is to simply modify the webpack.config.js with the following:
plugins: [
// ...
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default']
})
// ...
]
and let's not forget to import it in the main.ts
import 'bootstrap';
and voilà! We are back in business :)

If you are using Webpack Do this:
window.$ = window.jQuery = require('jquery');
window.Popper = require('popper.js').default; // pay attention to "default"
require('bootstrap/dist/js/bootstrap');

In bootstrap": "^4.1.1" no need to import jquery and popper.js because those plugins will be already included when 'bootstrap' or bootstrap's plugins imported individually.
Notice that if you chose to import plugins individually, you must also
install exports-loader
No need to require files require('exports-loader?file ... '); as mentioned here because this will be taken care automatically by just installing $ npm install exports-loader --save-dev
import 'bootstrap'; // Import all plugins at once
//
// Or, import plugins individually
//
// import 'bootstrap/js/src/alert';
// import 'bootstrap/js/src/button';
// import 'bootstrap/js/src/carousel';
// import 'bootstrap/js/src/collapse';
// import 'bootstrap/js/src/dropdown';
// import 'bootstrap/js/src/modal';
// import 'bootstrap/js/src/popover';
// import 'bootstrap/js/src/scrollspy';
// import 'bootstrap/js/src/tab';
// import 'bootstrap/js/src/tooltip';
// import 'bootstrap/js/src/util';
There is no need to do anything like below:
const webpack = require('webpack');
module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default']
})
]
}
}
I am a vue.js developer and in new vue-cli-3, we create vue.config.js in root and place code like above to register new plugin, but as said there is no need to do all this in bootstrap": "^4.1.1".
Bootstrap's tooltip plugin is depend on popper.js and need to be enabled manually, so you can do like below in the component where you use tooltip element:
<script>
import $ from 'jquery';
export default {
mounted() {
$('[data-toggle="tooltip"]').tooltip();
},
};
</script>

I just ran into the same issue, and the solution is described here: https://github.com/FezVrasta/popper.js/issues/287
My main.ts now looks like something like the following:
import "jquery";
import Popper from "popper.js";
(<any>window).Popper = Popper;
require("bootstrap");
And I had to run npm install #types/requirejs --save to get the call to require working.
EDIT: I totally missed this the first time around, but the documention actually has a better way to solve this https://getbootstrap.com/docs/4.0/getting-started/webpack/
plugins: [
...
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default'],
// In case you imported plugins individually, you must also require them here:
Util: "exports-loader?Util!bootstrap/js/dist/util",
Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
...
})
...
]

In ASP.net Core 2 project add the following scripts to of main HTML file ("_Layout.cshtml" file)
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/js/popper.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
For me it's working.

How to call bootstrap's jQuery plugins in ES6

I'm stuck trying to call the bootstrap's jQuery plugins, like popover, tooltip, modals, ...
I'm using webpack and this is my ES6 javascript:
import $ from 'jquery';
//import Bootstrap from 'bootstrap-sass';
//import Bootstrap from 'bootstrap-loader';
import Bootstrap from '../vendor/bootstrap.min.js';
class Test {
constructor () {
$('[data-toggle="tooltip"]').tooltip({ html: true });
}
}
I've tried to install bootstrap with npm, but after that i wasn't sure which one node-modules i had to import (like you can see in commented lines in the imports). So, i thought to import directly the bootstrap.min.js.
The fact is that i still have an error (independently if i try with popover/modals/tooltip) like this in my app.js that is my javascript generated from the webpack:
Uncaught TypeError: (0 , _jquery2.default)(...).tooltip is not a function
Like i say, i'm stuck here.
Last thing, the boostrap CSS works correctly thanks to this:
gulp.task('bootstrap-fonts', function() {
return gulp.src('node_modules/bootstrap-sass/assets/fonts/bootstrap/*')
.pipe(gulp.dest('./app/assets/fonts/bootstrap'));
});
gulp.task('dev', ['css', 'bootstrap-fonts', 'browser-sync', 'webpack'], function () {
gulp.watch('src/scss/**/*.scss', ['css']);
gulp.watch('src/js/**/*.js', ['webpack']);
gulp.watch('app/*.html', ['bs-reload']);
});

Because the bootstrap library depends on jQuery,
you should try to add the following plugin to the 'plugins' array in your webpack.config.js so that the bootstrap module will use the jQuery global object:
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": 'jquery'
}),
This plugin will actually injects the 'jquery' module in any other module that ask for him (means, every module that use the objects jQuery or $ or window.jQuery), and bootstrap is one of them.

how to import highcharts with webpack and babel

I use ES6, Babel and webpack stack.
I have installed highcharts by npm (I prefer to use the official highcharts npm repo):
npm install highcharts-release --save
But, regular import (ES6) doesn't work as expected:
import highcharts from 'highcharts';
How can I import Highcharts via webpack import?
Can you post a webpack.config.js example (or other way to config the plugins)?
Thanks.
EDIT
The error is:
Uncaught Error: Cannot find module "highcharts" webpackMissingModule # review-chart.js:2(anonymous function) ....

Try this:
npm install highcharts
The issue I faced with this approach is using other modules in highcharts, such as highcharts-more, map, etc., To overcome this I imported highcharts and the other required modules like this:
import highcharts from 'highcharts';
import highchartsMore from 'highcharts-more';
highchartsMore(highcharts);

2022 Update
Highcharts now have an official wrapper for React - https://github.com/highcharts/highcharts-react
There is a NPM called commonjs-highcharts that solves it. Just run
npm i commonjs-highcharts and import it:
import highcharts from "commonjs-highcharts"
Worked for me.

This is how I solved it, using Webpack v4.16.5 and Highcharts v5.0.11.
webpack.config
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: [{
loader: 'babel-loader'
}]
},
{
test: /highcharts.*/,
loader: 'imports-loader?window=>global&window.jQuery=>$'
}
// ...
],
alias: {
jquery: 'jquery/jquery'
// ...
}
},
externals: {
jQuery: 'jQuery'
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
'window.$': 'jquery',
Highcharts: 'highcharts/highcharts'
// ...
})
]
main.js 1st option
import addMore from 'highcharts/highcharts-more'
import addExporting from 'highcharts/modules/exporting'
import addOfflineExporting from 'highcharts/modules/offline-exporting'
import addSolidGauge from 'highcharts/modules/solid-gauge'
import addDrilldown from 'highcharts/modules/drilldown'
import addTreemap from 'highcharts/modules/treemap'
import addFunnel from 'highcharts/modules/funnel'
addMore(Highcharts)
addExporting(Highcharts)
addOfflineExporting(Highcharts)
addSolidGauge(Highcharts)
addDrilldown(Highcharts)
addTreemap(Highcharts)
addFunnel(Highcharts)
main.js 2nd option:
require('highcharts/highcharts-more')(Highcharts)
require('highcharts/modules/exporting')(Highcharts)
require('highcharts/modules/offline-exporting')(Highcharts)
require('highcharts/modules/solid-gauge')(Highcharts)
require('highcharts/modules/drilldown')(Highcharts)
require('highcharts/modules/treemap')(Highcharts)
require('highcharts/modules/funnel')(Highcharts)
This way, it's both $(..).highcharts() and Highcharts.chart() usable.
Hope this helps!

Try doing an npm install highcharts-release. Then in your JavaScript file do import Highcharts from 'highcharts-release/highcharts';. There may be a better way, but that worked for me.

Try variations of:
require('expose?Highcharts!highcharts');
require('highcharts/modules/map')(Highcharts);
require('highcharts/highcharts-more')(Highcharts);
require('expose?Highcharts!highcharts/highstock');
If you wander around in ./node_modules/highcharts/... you might be able to trial-and-error your way into the modules and/or libs you need.
I don't have any joy using the form
$('myselector').highcharts(...)
Replacing them with
Highcharts.chart('myselector', ...)
works for me.

You don't need any extra plugin or modification in your webpack config file. Just follow these steps:
install typings file for highcharts using this:
npm install --save #types/highcharts
change your import statements to following:
import * as Highcharts from 'highcharts';
import HighchartsMore = require('highcharts/highcharts-more');
HighchartsMore(Highcharts);

For me only this method is working with webpack(and was working with browserify as well):
global.js
import $ from 'jquery';
global.$ = global.jQuery = $;
app.js
import './globals';
import 'angular';
import 'highcharts';
// ...
I don't know why webpack.ProvidePlugin works fine with AngularJS but not with highcharts.
My config was looking like:
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery', // for using with AngularJS
_: 'underscore',
moment: 'moment'
})
// I've also tried this but without luck:
{
test: require.resolve('highcharts'),
loader: 'imports-loader?jQuery=jquery'
}

Try using the package name as used during npm install:
import highcharts from 'highcharts-release';

i am working with AngulrJS, ES6, Webpack and Babel. it took me a while to find it but i ended up using expose on highchart.
this is what i did:
npm install highcharts --save
import 'expose?highcharts!highcharts/highcharts';
only import as shown, no need for any thing else.
and then you can simple use highchart in your controller (without adding it as a dependency)

import Highcharts from 'highcharts';
import 'highcharts-ng' //add this line if you wish to use highcharts angular directive
And then add a new rule in the webpack.config.js
{
test: require.resolve('highcharts'),
use:[{
loader: 'expose-loader',
options: 'Highcharts'
}]
}

I am using Laravel Mix (on top of Webpack) in case this helps anyone out.
App.js
import Highcharts from 'highcharts';
import highchartsMore from 'highcharts/highcharts-more';
window.Highcharts = highcharts;
highchartsMore(Highcharts);
This works with:
"highcharts": "^9.3.2",