How to add popper.js in an oracle JET project

Question

I am trying to include bootstrap in my OJET project where I use ojet v6 library. I got an error saying ojmodule failed due to "popper is required".

What I have Tried

1. I have added the popper.js in lib folder.
2. I have included the lib in main.js file inside require.js configPath array.

requirejs.config({
  // Path mappings for the logical module names
  paths:
  //injector:mainReleasePaths
  {
    'popper' : 'libs/popper/popper.min' ,
    'bootstrap' : 'libs/bootstrap4/js/bootstrap.min',
    //other libs goes here

3. Added the "popper" reference in shim object of main.js

    shim: {
    'jquery': {
        exports: ['jQuery', '$']
    },
    'Popper' : {
        exports : ['Popper', 'popper']
        }
    }

4. added the popper reference in an ojet module. by

define(['ojs/ojcore', 'knockout', 'appController','popper','bootstrap'],
        function (oj, ko, app, popper,bootstrap) {

Still get an error failed to load ojet module "popper is needed by require.js". Please help or suggest any edit.

Answer 1

Bootstrap 4 uses popper.js and jquery as its dependency. It should be loaded before bootstrap. As I can see you have added in shim and assuming that the path provided in the require.config is correct It should work;

If it is not working you can have a workaround like instead of adding the dependency separately to the project add the bootstrap bundle directly.

requirejs.config({
  // Path mappings for the logical module names
  paths:
  //injector:mainReleasePaths
  {
    'jquery': 'libs/jquery/jquery-3.3.1',
    'bootstrap' : 'libs/bootstrap4/js/bootstrap.bundle.min',

Note the bootstrap.bundle.min.js contains popper but not jquery. So you need to load jquery before bootstrap.

Answer 2

instead of adding bootstrap.min.js add bootstrap.bundle.min.js to your require path.

Answer 3

I tried to include underscore.js and followed below steps:

1. npm i underscore.js, we can install any module because it runs on node

2. modify path_mapping.json:

"underscore": {
    "cdn": "3rdparty",
    "cwd": "node_modules/underscore",
    "debug": {
        "src": "underscore.js",
        "path": "libs/underscore/underscore.js",
        "cdnPath": "underscore/underscore.1.0"
    },
    "release": {
        "src": "underscore.min.js",
        "path": "libs/underscore/underscore.min.js",
        "cdnPath": "underscore/underscore.1.0"
    }
}

3. modify main.js

'underscore': 'libs/underscore',

4. use in viewModels:

define([
    "require", "exports", "knockout", "ojs/ojbootstrap", "ojs/ojconverterutils-i18n", "ojs/ojarraydataprovider", "ojs/ojcolor", "ojs/ojconverter-datetime", "underscore","ojs/ojknockout", "ojs/ojbutton", "ojs/ojinputtext", "ojs/ojcollapsible", "ojs/ojinputnumber", "ojs/ojradioset", "ojs/ojcheckboxset", "ojs/ojselectcombobox", "ojs/ojselectsingle", "ojs/ojdatetimepicker", "ojs/ojswitch", "ojs/ojslider", "ojs/ojcolorspectrum", "ojs/ojcolorpalette", "ojs/ojlabel", "ojs/ojformlayout", "ojs/ojlabelvalue","ojs/ojaccordion","ojs/ojactioncard"
], 
function (require, exports, ko, Bootstrap, ojconverterutils_i18n_1, ArrayDataProvider, Color, ojconverter_datetime_1,_) {
    function EmployeesViewModel() {
        _.each([1, 2, 3], console.log);
        var self=this;
        self.logMsg = ko.observable("none");
        self.actionHandler = (event) => {
            this.logMsg("Action handler invoked - " + event.currentTarget.id);
        };
    }
    return EmployeesViewModel;
});