How to use npm package in webpack environment

[hussain1368]

This does not work for me:
import 'bootstrap'; import bootbox from 'bootbox'; bootbox.alert("Hello world!");

[Aleksandar Palic]

Same... I'm searching for hours now to make this work in a webpack setup.

Basically it always fails with: Error: "$.fn.modal" is not defined; ...

I tried importing everything:

import $ from "jquery";
import "popper.js";
import "bootstrap";
import bootbox from "bootbox";
...

The weird part is that usual BS4 modals work out of the box, so bootstrap.js seems to be imported and working, it's just bootbox that won't work.

Deps:

"dependencies": {
    ...
    "bootbox": "^5.4.0",
    "bootstrap": "^4.4.1",
    "jquery": "3.4.1",
    ...
  }

Any idea @makeusabrew @tiesont ?

[Tieson Trowbridge]

I haven't seen @makeusabrew around for quite a while, so you're probably not going to get a response, there. I don't use webpack (or pretty much any package manager), so I'm not sure what help I can be.

If/when I get some time, I'll see what I can figure out, but it might be awhile.

[Tarmo Leppänen]

Something that could help here is to provide some simple repository where this error is happening - just to help other people to jump in without knowing any "details" about that webpack environment itself.

[Harri Ohra-aho]

I just took bootbox into use in a Webpack project and it works fine right out of the box.
I have the following imports in my entry JS file (actually Typescript...) I guess I took these from some documentation concerning including Bootstrap in general in npm/Webpack.

import "jquery";
import "popper.js";
import "bootstrap";

And in the file actually using bootbox:

import bootbox from "bootbox";

[Gab]

I used the suggestion by @harrio and it works in Svelte/Rollup.

[Marcin Charmułowicz]

I have also problem with Error: "$.fn.modal" is not defined; ...

After some inspections I realized bootbox, since > 5.0, has its own bootstrap and jquery in dependencies and ignores my libraries from package.json. I use Webpack Encore (because it's a Symfony project) with autoProvidejQuery(), but this should not be the case.

In my example

package.json
{
  "dependencies": {
    "bootbox": "5.3.4",
    "bootstrap": "^3.4",
    "jquery": "3.4.1",
  },

and in source code

import $ from 'jquery';
import 'bootstrap';
import bootbox from 'bootbox';

I checked sth like this

import $ from 'jquery';
import 'bootstrap';
console.log($.fn.jquery, $.fn.modal);
import bootbox from 'bootbox';

and it's 3.4.1 (as in my package.json) and $.fn.modal is a proper function.

So then I edited bootbox.js in node_modules and added console.log($.fn.jquery, $.fn.modal); just after

}(this, function init($, undefined) {
  'use strict';

  console.log($.fn.jquery, $.fn.modal);

and it's 3.5.1, undefined. So here's a problem.

EDIT: Removing node_modules/bootbox/node_modules solved the problem, but it's not a solution at all - internal node_modules shouldn't be provided I think.

EDIT2: @makeusabrew In bootbox package.json (example for 5.3.4 used by me) shouldn't be

  "peerDependencies": {
    "jquery": ">=1.12.0",
    "popper.js": ">=1.12.9",
    "bootstrap": ">=3.0.0"
  }

instead of

  "dependencies": {
    ...
  }

https://classic.yarnpkg.com/en/docs/dependency-types/#toc-peerdependencies

[hussain1368]

The following worked for me:
// webpack.config.js module.exports = { ... plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) ] };
I got the solution form this StackOverflow discussion:
https://stackoverflow.com/questions/26749045/webpack-expressing-module-dependency

[Marcin Charmułowicz]

@hussain1368 This is exactly what autoProvidejQuery does in Encore :)

Problem lays in node_modules inside bootbox directory and how require works - here is a good explanation: https://www.bennadel.com/blog/2169-where-does-node-js-and-require-look-for-modules.htm

First, Node.js looks to see if the given module is a core module - Node.js comes with many modules compiled directly into the executable binary (ex. http, fs, sys, events, path, etc.). These core modules will always take precedence in the loading algorithm.

If the given module is not a core module, Node.js will then begin to search for a directory named, "node_modules". It will start in the current directory (relative to the currently-executing Javascript file in Node) and then work its way up the folder hierarchy, checking each level for a node_modules folder.

[Marcin Charmułowicz]

I've already created PR solving this issue: #759.

To test this I added cloned locally version of Bootbox repo (with peerDepenecies) to my project - no node_modules in Bootbox dir and everything worked as well.

[Marcin Charmułowicz]

By the way: according to http://bootboxjs.com/getting-started.html#bootbox-dependencies
Bootbox version: 5.x.x (Latest)
Min. Bootstrap version: 3.0.0 / 3.1.0
Max. Bootstrap: 4.x.x
Min. jQuery: 1.9.1

So why in package.json there's:

  "dependencies": {
    "bootstrap": "^4.4.0",
    "jquery": "^3.4.1",
    "popper.js": "^1.16.0"
  }

?

[Tieson Trowbridge]

@giero Those dependencies assume you're loading bootbox et all manually, via script tags. It's more of a compatibility chart than a dependency chart, when it comes down to it.

package.json is updated when I find myself working in a npm environment, which is mostly just when trying to update the documentation or running the test suite prior to accepting a pull-request. That being said (and as I noted somewhere above) I don't generally use npm, so if something's not quite right, I wouldn't be surprised. I've seen your pull-request and I'll try to take some time to review it, unless @tarlepp gets to it first.

[Marcin Charmułowicz]

I think it would be a good idea to edit peerDependencies in my pull-request to be consist with documentation (for Bootbox 5.x.x):
before: "bootstrap": "^4.4.0"
after: "bootstrap": "^3.1.0 || ^4.4.0"

[Aleksandar Palic]

Will this get merged any time soon?