popper.jsoracle-jet

How to add popper.js in an oracle JET project


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
  1. Added the "popper" reference in shim object of main.js
    shim: {
    'jquery': {
        exports: ['jQuery', '$']
    },
    'Popper' : {
        exports : ['Popper', 'popper']
        }
    }
  1. 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.


Solution

  • 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.