Util is not defined when referencing individual jQuery plugins (modal.js) via webpack

[mdcuesta]

I got an error Uncaught ReferenceError: Util is not defined when referencing plugins individually.

// jQuery defined global
import '.../....../util.js;
import '.../...../modal.js

The rest is HTML.

Note that referencing the bootstrap.js directly works
// jQuery defined global
import '.../....../bootstrap.js;

[cvrebert]

We're unable to provide specific assistance with third-party tools such as webpack, but this is presumably caused by #19017 or #18413.

[mdcuesta]

Thank you.

[gilbarbara]

@mdcuesta try this import 'expose?Util!exports?Util!bootstrap/js/dist/util';

[iantbarker]

I get the same error when enqueueing singular JS files (dropdown and collapse) in WordPress or including those files via a gulp process.

Enqueueing the bootstrap-min.js file doesn't throw those errors, however.

[edouard-lopez]

@gilbarbara any idea how to do that with require() ?

update: shakacode/bootstrap-loader#172

[gilbarbara]

@edouard-lopez
Not really. Since Utils doesn't exports its code with module.exports, it is locked inside its own context unless it is loaded in the old fashion way.

[edouard-lopez]

Here is how I did it:

Installed exports-loader

 npm install --save-dev [email protected]  # version I installed

Import the collapse.js to my application entry point main.js:

 require('bootstrap/js/dist/collapse.js');

Map Util to the lib in webpack.config.js:

plugins: [
	new webpack.ProvidePlugin({
		$: 'jquery',
                    // …
		Util: 'exports?Util!bootstrap/js/dist/util'
	})

For reference

I'm working with:

	"angular": "1.5.x",
	"bootstrap": "4.0.0-alpha.5",
	"webpack": "^1.14.0",
	"webpack-dev-server": "^1.16.2",

[Vivi-wu]

I find that code in 'bootstrap/js/src/util.js' was written in ES6 style:

const Util = (($) => {
...
})(jQuery)
export default Util

So, instead of importing files under 'bootstrap/js/dist', you should import them from 'bootstrap/js/src'
Here is my solution:

// webpack.conf.js
var webpack = require('webpack')
module.exports = {
...
plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
}

In the entry file:

// index.js
import 'bootstrap/js/src/util'
import 'bootstrap/js/src/modal'

[miguelgarcia7]

Thank you very much @Vivi-wu . It worked for me.

[ib4]

@Vivi-wu Thanks, this is the solution. I'd like to add that you need support for the spread operator, and that can be achieved with "babel-preset-stage-2". In addition, the path to bootstrap may need to be a part of the include property in webpack.config, e.g.

   module: {
        rules: [
            {
                test: /\.js$/,
                include: [__dirname + '/assets/js/', __dirname + '/node_modules/bootstrap/js/'],
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env', 'stage-2'],
                        plugins: ['transform-runtime']
                    }
                }
            }
        ]
    }

[spaceemotion]

For anybody using laravel-mix, something along the following needs to be added to your webpack.mix.js, as there is no direct way to modify specific rules (yet):

Mix.listen('configReady', ({ module }) => {
    module.rules.find(rule => {
        if (rule.test.test && rule.test.test('test.js')) {
            delete rule.exclude;
            rule.include = [
                __dirname + '/resources/assets/js/',
                __dirname + '/node_modules/bootstrap/js/',
            ];
        }
    });
});

[CyrilKrylatov]

@Vivi-wu hi,

I tried your solution but I still have a "Util is not defined" when I try to launch my modal.

Would you mind to take a look at this issue that I created yesterday about eveything I've done to make it work?

Thank you for your time.