Load bootstrap JS with esbuild

Question

I'm trying to import the bootstrap JS in my esbuild build:

// index.js
import 'jquery-import'
import 'bootstrap'

// jquery-import.js
import jquery from 'jquery'
window.jQuery = window.$ = jquery;

The build target is esm. The problem is that the following bootstrap code is run:

factory(exports, require('jquery'), require('popper.js'));

This does not use my global window.jQuery but rather requires its own, which means that my global window.$.fn doesn't include the Bootstrap extensions. Also, I think that this makes jQuery load twice.

Is there a way of fixing this without adapting the bootstrap source code?

A little more background on this:

The bootstrap source code begins with the following statements (lightly adapted for better readability):

(function (global, factory) {
  if (typeof exports === 'object' && typeof module !== 'undefined') {
    // Option 1: The route taken by esbuild
    factory(exports, require('jquery'), require('popper.js'));
  } else if (typeof define === 'function' && define.amd) {
    // Option 2
    define(['exports', 'jquery', 'popper.js'], factory);
  } else {
    // Option 2
    (global = global || self, factory(global.bootstrap = {}, global.jQuery, global.Popper));
  }
}(this, function (exports, $, Popper) { 'use strict';

I have tried commenting out individual options, and neither 1, 2 or 3 work by just taking the already globally defined window.jQuery.

Many thanks for your help!

score 3 · Answer 1 · answered Mar 29 '22 at 13:14

The reason it's not working, is for some reason your esbuild is trying to import a UMD file (typically used for old Node and browser hybrid code).

Having looked at bootstrap's package.json, it seems that "module": "dist/js/bootstrap.js", which exports bootstrap as modules, which is probably what esbuild should be referencing.

So to fix this without fixing the esbuild config, I'd conjecture you could try:

import 'bootstrap/dist/js/bootstrap'

...or to fix it with esbuild config, add this:

const buildOpts = {
  mainFields: ['module', 'main'],
}

This setting tells the bundler to prioritises module, then main entrypoints.

Normally this is module before main, but it may be the other way round because you set platform to "node".

Load bootstrap JS with esbuild

1 Answers1