We Keep Coding

How to correctly expose jQuery with Webpack 5?

Is there any specific way to expose jQuery with Webpack 5?
It used to work on Webpack 4 OK, with the config bellow, but it shows the Uncaught Reference Error: jQuery is not defined error now with 5.
module: {
rules: [
{
test: require.resolve('jquery'),
loader: 'expose-loader',
options: {
exposes: ['$', 'jQuery'],
},
},

Confirming #Sam Chen 's comment above, Webpack 5 (as of 5.75) does not require expose-loader to make $ available as an import. It was simplest to uninstall the loader, remove it from webpack.config.js, and add
import $ from 'jquery';
to all files that used it. This can get messy in the case of TypeScript projects with #types/jquery, as pages where the import is missing may not warn about it.

Can't load a module with custom loader in vue-cli project

I have a project where Webpack 4.43.0 is set up with vue-cli. I'm trying to use
image-size-loader to get image size at build time.
For that, in one of my .vue files I'm trying to load the module using the custom loader I have installed in the project:
const background = require("image-size!../../../../assets/images/candy.jpg");
When my project builds, it outputs the following error:
ERROR Failed to compile with 1 errors8:47:03 AM
This dependency was not found:
* image-size!../../../../assets/images/candy.jpg in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/vue/guides/tags/hero/TagGroupInvite.vue?vue&type=script&lang=js&
To install it, you can run: npm install --save image-size!../../../../assets/images/candy.jpg
The file is present and js/ts/css files resolve fine. What can be wrong with my setup?

I think you have to specify image-size as a loader too.
Append this loader to webpack.base.conf.js
...
loaders: [
...
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'image-size'
}
...
]
...

How can I dynamically import a peer dependency in a file bundled with webpack?

I am working on a plugin that uses jQuery as a peer dependency. When I try importing this plugin into my main project (that has jQuery already installed) I get the error Module not found: Error: Can't resolve 'jquery' in <(plugin's folder)>. It seems that when I try to dynamically import jQuery (a peer dependency) webpack looks in the plugin's node_modules folder when compiling, rather than the root project's node_modules, even though it is a peer dependency. How can I get webpack to look in the root project's node_modules rather than the plugin's node_modules?
Webpack.config.js:
var webpack = require('webpack');
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
],
watch: true,
resolve: {
alias: { jquery: "jQuery" }
}
};

I think I found the solution by adding this to my webpack config's resolve option:
modules: [
path.resolve('./node_modules'),
path.resolve('../node_modules')
]
Edit: The issue seemed to go away completely once I actually imported the project from npm, whereas before I was using an npm link. The above solution is no longer required.

Trouble using babel transpiler with WebPack

I'm trying to use this package in my application.
It appears to be written in ES6 so I need a transpiler like babel. I've started a new project and tried the following:
Create new index .html / .js file for testing.
npm install audio-effects
npm install gulp gulp-babel babel-preset-es2015
Create .babelrc
After trying to run this from the dist folder with python -m SimpleHTTPServer, I got an error: index.js:3 Uncaught ReferenceError: require is not defined.
After some digging, this is because require can't be used client-side. So next I looked into using WebPack to allow me to use require.
I went into my dist folder (where my transpiled javascript is) and ran:
webpack ./index.js index.js
But now I'm getting the error index.js:78 Uncaught SyntaxError: Unexpected token import.
Can anybody see what I'm missing (apart from a NPM-ES6-Gulp-WebPack tutorial)? I seem to be stuck in a loop of WebPack-ing and transpiling.
index.html
<!DOCTYPE html>
<html>
<body>
<h4>Welcome</h4>
<button onclick="startAudio()">Start Audio</button>
<script src="js/index.js"></script>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
index.js (pre-babel / WebPack - ification)
import {HasAudioContext} from 'audio-effects';
function startAudio() {
console.log("Start Audio...");
let audioContext = null;
if (HasAudioContext) {
console.log("Has Audio CTX");
audioContext = new AudioContext();
}
else {
console.log("No Audio CTX");
}
}
gulpfile.js
var gulp = require("gulp");
var babel = require("gulp-babel");
gulp.task("default", function () {
return gulp.src("src/app.js")
.pipe(babel())
.pipe(gulp.dest("dist"));
});

I've made some changes to the library (I'm the original author of the package). When installing the package with npm, you will now get the transpiled ES5 code instead of the ES6 source. You'll still need webpack, browserify, ... to load the module though.
This might fix the the Uncaught SyntaxError: Unexpected token import error, so please update your audio-effects library to the latest version.
The wrong imports as mentioned in the answer by Jorawar Singh should be resolved as well.
I'm still working on the library so if you run into any problems, feel free to create an issue or pull request on github.
I personally use the package with webpack. this is my webpack.config.babel.js file (remove comments).
Note: I'm using react, if you don't set the react parameter to false.
import config from 'madewithlove-webpack-config';
export default config({
react: true,
sourcePath: 'src', // Source directory
outputPath: 'builds', // Transpiled coded directory
});
This imports a basic webpack config from https://github.com/madewithlove/webpack-config/
Since I'm writing code in ES6, I'm transpiling it with babel, my .babelrc file looks like this:
{
"presets": ["es2015", "stage-0"],
}
With all this setup, you can just run webpack with webpack-dev-server --inline --hot.
You don't have to use the madewitlove webpack config but it takes care of some standard setup like compiling scss etc.
I hope this gives you an insight in how to use the audio-effects package or any other ES6 package.

Well what i understand there was some issues with this library it was written es6 and when you do import and want to complie into es5 with webpack then webpack will also bummbel all the require modules for you. Here's my webpack.config look likes
var webpack = require('webpack');
var config = {
entry: './index.js',
output: {
path: __dirname + '/dist',
filename: 'bundle.js'
},
module: {
loaders: [ {
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}]
}
};
module.exports = config;
running by webpack will compile the library and your index.js file to bundle.js
there was some other issues i think in order to get this library you need to do some small changes in library.
from
'./Helpers/HasAudioContext'; //this doesn't exist and
//webpack will give you compile error
to
'./helpers/hasAudioContext';
I had one issue whitch i couldn't resolve is i couldn't run the startAudio function but through the index.js i could (weard let me know if you find why)
in your index.js
document.getElementById("btn").addEventListener("click", startAudio);
there are still some issues witch i want to resolve and also there are some issues with the library witch need to be resolved

How to include Jquery/Bootstrap files into the stack Webpack/angular2/typescript

Into my project I use the stack Webpack/angular2 (with typescript).
I try to include the .js files of boostrap & jquery but I can't find a simple and well explain way...
I tried succesively to use:
imports-loader into webpack.config
import "jquery" into vendor-browser.ts
require("jquery") into my ts files
I probably miss something...
I'm looking for a generic solution to include a .js file into the "window" object. Files are located into the node_modules folder.
Can someone help me?
Thanks!

If i understood you then ypu want to add jquery and bootstrap.js in your angular2 project
Here is example how i did.
add a plugin so jquery can be loaded before bootstrap
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
and if you have installed bootstrap and jquery with npm then just import them in your main file
import "bootstrap/dist/js/bootstrap.js";
import "jquery";
now you can test in browser's console by typing $
and it should show you that there is jquery loaded.

MrJSingh answer is almost correct. Except that when using ProvidePlugin $ will not be available in browser console. What this plugin doing is replacing every $ occurence with require(jquery).
So, it will not work if you are using external jquery plugins!
Also, when using this solution, I recommend include also window.jQuery as some plugins only work with such notation.
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
'window.jQuery': "jquery"
})
If you need more universal solution, consider using expose-loader:
npm install expose-loader --save-dev
And then this :
require("expose?$!jquery");
or this right in webpack config:
loaders: [
{ test: require.resolve('jquery'), loader: 'expose?jQuery!expose?$' }
]

One solution is this lib (for webpack)
https://github.com/shakacode/bootstrap-loader
Successor to bootstrap-sass-loader.
Load Bootstrap styles and scripts in your Webpack bundle.
This loader uses SASS to process CSS styles.
Bootstrap 3 & 4 are supported.
basic example: https://github.com/shakacode/bootstrap-loader/blob/master/examples/basic
css module example: https://github.com/shakacode/bootstrap-loader/blob/master/examples/css-modules