'How to properly load JQuery Objects from Node Modules?

I am working on the simple NodeJs App. While working with Frontend, it correctly loads all NodeJS modules related to JQuery, but when I am going to make a simple JavaScript-based Implementation and trying to load all of those JQuery files from Node-Modules. I am unable to get anything out of them.

I am really new to NodeJS and JQuery, but I am passionate to develop a console-based Implementation for my testing.

Node-Modules:

Following are the node modules on which I am working right now.

  "dependencies": {
"crypto-js": "^3.1.9-1",
"jquery": "^3.6.0",
"jquery-json": "^2.6.0",
"verto": "0.0.2"
}

Working Example:

I have implemented the following files to work with these modules;

index.html
app.js

index.html


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo of Aswat Verto Integration</title>
    <link rel="stylesheet" href="app.css">
  </head>

  <body>
    <div class="config">
      <div class="config-row">
        <label for="hostname">Hostname</label>
        <input id="hostname" type="text">
      </div>
      <div class="config-row">
        <label for="socketURL">Socket URL</label>
        <input id="socketURL" type="text">
      </div>
      <div class="config-row">
        <label for="position">Position</label>
        <input id="position" type="text">
      </div>
      <div class="config-row">
        <label for="password">Password</label>
        <input id="password" type="text">
      </div>
      <div class="config-row">
        <button class="config-action" onclick="connectToFreeswitch()">Connect</button>
      </div>
    </div>

    <div class="dialler">
      <div class="dialler-status">
        Current status <br>
        <span id="positionStatus">Not Connected</span> <br> <span id="callStatus">Not in a Call</span>
      </div>
      <div class="dialler-content" id="dialler">
        <div class="dialler-row">
          <input type="text" class="dialler-input" id="diallerInput">
        </div>

        <div class="dialler-row">
          <span class="dialler-number" onclick="dial('1')">1</span>
          <span class="dialler-number" onclick="dial('2')">2</span>
          <span class="dialler-number" onclick="dial('3')">3</span>
        </div>

        <div class="dialler-row">
          <span class="dialler-number" onclick="dial('4')">4</span>
          <span class="dialler-number" onclick="dial('5')">5</span>
          <span class="dialler-number" onclick="dial('6')">6</span>
        </div>

        <div class="dialler-row">
          <span class="dialler-number" onclick="dial('7')">7</span>
          <span class="dialler-number" onclick="dial('8')">8</span>
          <span class="dialler-number" onclick="dial('9')">9</span>
        </div>

        <div class="dialler-row">
          <span class="dialler-number" onclick="dial('*')">*</span>
          <span class="dialler-number" onclick="dial('0')">0</span>
          <span class="dialler-number" onclick="dial('#')">#</span>
        </div>

        <div class="dialler-row">
          <button class="dialler-action" onclick="makeCall()">Call</button>
          <button class="dialler-action" onclick="hangupCall()">Hangup</button>
        </div>

        <div class="dialler-row">
          <button class="dialler-action" onclick="answerCall()">Answer</button>
          <button class="dialler-action" onclick="transfer()">Transfer</button>
        </div>

        <div class="dialler-row">
          <button class="dialler-action" onclick="mute()">Mute</button>
          <button class="dialler-action" onclick="unmute()">Unmute</button>
        </div>

        <div class="dialler-row">
          <button class="dialler-action" onclick="hold()">Hold</button>
          <button class="dialler-action" onclick="unhold()">Unhold</button>
        </div>
      </div>

      <video class="hide" id="positionDevice" autoplay="autoplay" style="width:100%; height:100%; object-fit:inherit;"></video>
    </div>

    <!-- Verto dependencies -->
    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../node_modules/jquery-json/dist/jquery.json.min.js"></script>

    <!-- Verto library -->
    <script src="../node_modules/verto/src/jquery.verto.js"></script>
    <script src="../node_modules/verto/src/jquery.FSRTC.js"></script>
    <script src="../node_modules/verto/src/jquery.jsonrpcclient.js"></script>
    <script src="app.js"></script>
  </body>
</html>

app.js


let diallerInput = document.getElementById('diallerInput');
let currentCall = '';

/**
  This function will execute the _bootstrap function to connect to the Verto server
  and log in with specified credentials and configurations.
  To see the full documentation, go to: http://evoluxbr.github.io/verto-docs/tut/initializing-verto.html
**/
function connectToFreeswitch() {
  hostname  = document.getElementById('hostname').value;
  socketURL = document.getElementById('socketURL').value;
  position  = document.getElementById('position').value;
  password  = document.getElementById('password').value;

  function _bootstrap(status) {
    vertoHandle = new jQuery.verto({
      login: position + '@' + hostname,
      passwd: password,
      socketUrl: socketURL,
      ringFile: 'ringtone.mp3',
      tag: 'positionDevice',
      deviceParams: {
        useMic: true,
        useSpeak: true
      },
      iceServers: true
    },
    /**
      Almost everything that happens in Verto fires an event.
      onWSLogin will be fired on login
      onWSClose will be fired when closing the socket
      onDialogState is used to handle incoming and outgoind calls
    **/
    {
      onWSLogin: onWSLogin,
      onWSClose: onWSClose,
      onDialogState: onDialogState
    });
  }

  if (hostname && socketURL && position && password) $.verto.init({}, _bootstrap);
  else alert('You need to provide the full configuration settings.');
}

Using the above files, NodeJs Modules related to these JQuery Files are properly loading into Dom Object;

    <!-- Verto dependencies -->
    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../node_modules/jquery-json/dist/jquery.json.min.js"></script>

    <!-- Verto library -->
    <script src="../node_modules/verto/src/jquery.verto.js"></script>
    <script src="../node_modules/verto/src/jquery.FSRTC.js"></script>
    <script src="../node_modules/verto/src/jquery.jsonrpcclient.js"></script>

I have tested it with the front-end, and everything is going really great; But What I need is to load the above given node modules, directly into JS.

Not Working Example:

Here I have implemented this technique to load JQuery Objects;

verto.html

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <script src="./node_modules/jquery/dist/jquery.min.js"></script>
    <script src="./node_modules/jquery-json/dist/jquery.json.min.js"></script>

    <script src="./node_modules/verto/src/jquery.verto.js"></script>
    <script src="./node_modules/verto/src/jquery.FSRTC.js"></script>  </body>
</html>

app.js


'use strict';

const { JSDOM } = require('jsdom');

const options = {
  resources: 'usable',
  runScripts: 'dangerously',
};

JSDOM.fromFile('verto.html', options).then((dom) => {
  console.log(dom.window.document.body.textContent.trim());
  
  // Importing the jquery and providing it
  // with the window
  const jquery = require("jquery")(dom.window);
  console.log(jquery);
  console.log(jquery.verto);


  setTimeout(() => {
    console.log(dom.window.document.body.textContent.trim());
  }, 5000);
});

When I run this simple app, it's not loading simple JQuery at all. I need assistance regarding the above problem; I have visited these articles but I am not sure where I am doing wrong;

Your little assistance might save my whole day; Thanks in Advance

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How to properly load JQuery Objects from Node Modules?

Sources

Related Questions