Bootstrap v4 and JSPM jQuery Dependency

[markhughes]

Hello! I'm having some complications here..

I have both jQuery and bootstrap installed like so:

jspm install jquery
jspm install bootstrap=npm:[email protected] 

However, when I try to use it like so..

import $ from "jquery";
import "bootstrap"; // ... nothing will happen past this point 

// .. should be getting to this point and doing stuff ...

I get Uncaught Error: Bootstrap's JavaScript requires jQuery in my console when trying to use my website.

This is odd, as I use other jQuery plugins and they work fine with JSPM.

Here is my config.js file: http://pastebin.com/dEwS77an

Using JSPM 0.16.33

😄

[cvrebert]

Approximate duplicate of #19067.
This will get properly resolved once we use ES6 imports for jQuery in our modules, which falls under #19017.

[markhughes]

I see. I've gotten halfway, however I'm still trying to work out what Tether exports as I cant seem to get it on the global scope.

Globals.js

import $ from "jquery";
import Tether from "HubSpot/tether";

global.jQuery = $;
global.Tether = Tether;

Main.js

import $ from "jquery";
// ... more imports here ... 
import "./Globals";
import "tether";
import "bootstrap";

// .. blah blah 

So this gets past the jQuery issue, however Tether is now required:
Uncaught Error: Bootstrap tooltips require Tether (http://github.hubspot.com/tether/)

In console..

> window.jQuery
   (a,b){return new ga.fn.init(a,b)}
> window.Tether
   undefined

[markhughes]

Never mind! I screwed around with it enough, and used window instead of global ..

Globals.js

import $ from "jquery";
import Tether from "HubSpot/tether";

window.jQuery = $;
window.Tether = Tether;

Main.js

import $ from "jquery";
import Tether from "HubSpot/tether";
import "./Globals";

// .. blah blah 

import Backend from "./Backend/Backend";