jQuery does not work on Electron App

Question

I’m creating an app Electron just study, only that I’m finding a problem.

I created a page html simple, using the framework Bootstrap 4.0, in it I put only one menu.

index.html

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container">
          <!--a class="navbar-brand" href="#">Navbar</a-->
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav mr-auto">
                  <li class="nav-item active">
                      <a class="nav-link" href="#">Arquivos</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">Configurações</a>
                  </li>
              </ul>
              <ul class="nav navbar-nav navbar-right">
                  <li class="nav-item dropdown">
                      <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
                          <i class="fa fa-user" aria-hidden="true"></i>
                          <strong>wmsouza</strong>
                          <span class="glyphicon glyphicon-chevron-down"></span>
                      </a>
                      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
                          <div class="navbar-login">
                              <div class="row">
                                  <div class="col-lg-4">
                                      <p class="text-center">
                                          <i class="fa fa-user icon-size" aria-hidden="true"></i>
                                      </p>
                                  </div>
                                  <div class="col-lg-8">
                                      <p class="text-left"><strong>Wéllingthon Motta</strong></p>
                                      <p class="text-left small">[email protected]</p>
                                      <p class="text-left">
                                          <a href="#" class="btn btn-primary btn-block btn-sm">Atualizar dados</a>
                                      </p>
                                  </div>
                              </div>
                          </div>
                              <div class="navbar-login navbar-login-session">
                                  <div class="row">
                                      <div class="col-lg-12">
                                          <p>
                                              <a href="#" class="btn btn-danger btn-block">Sair</a>
                                          </p>
                                      </div>
                                  </div>
                              </div>
                      </div>
                  </li>
              </ul>
          </div>
      </div>
  </nav>

Add the scripts necessary.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

Done so, while opening the file index.html in the browser, works perfectly.

More when executing in the app, the method dropdown does not work and returns error in the console saying that the Bootstrap needs the jQuery.

Uncaught Error: Bootstrap’s Javascript requires jQuery. jQuery must be included before Bootstrap’s Javascript. at bootstrap.min.js:6 (Anonymous) @bootstrap.min.js:6

But in the tab Network, shows that the jQuery was loaded.

What might be going on ?

Answer 1

From what I understand Eletron uses Node.js or jQuery ends up working as if it wasn’t running in a "browser", so instead of jQuery being accessible in the scope of window. it ends up only accessible in the scope of global. or just using require(), this because of this passage:

if ( typeof module === "object" && typeof module.exports === "object" ) {

    // For CommonJS and CommonJS-like environments where a proper `window`
    // is present, execute the factory and get jQuery.
    // For environments that do not have a `window` with a `document`
    // (such as Node.js), expose a factory as module.exports.
    // This accentuates the need for the creation of a real `window`.
    // e.g. var jQuery = require("jquery")(window);
    // See ticket #14549 for more info.
    module.exports = global.document ?
        factory( global, true ) :
        function( w ) {
            if ( !w.document ) {
                throw new Error( "jQuery requires a window with a document" );
            }
            return factory( w );
        };
} else {
    factory( global );
}

I believe that by adding via <script> you will already have available in the modules, then you can add so to the window.:

window.$ = window.jQuery = require("jquery");

However you can also choose to download the features and use them like this:

window.$ = window.jQuery = require('./caminho/pasta/js/jquery-3.2.1.slim.min.js');

./caminho/pasta/js is just one example

Instead of using Cdns, even more so as an application it might be interesting to have the features offline