I am getting "Uncaught ReferenceError: tippy is not defined "

I have written this code

require 'watir'
b = Watir::Browser.new
b.window.maximize

  b.goto 'URL'
  # var headElement = document.getElementsByTagName(\"head\")[0];
sleep 3
b.execute_script("
const popperStylesheet = document.createElement('link');
popperStylesheet.rel = 'stylesheet';
popperStylesheet.href = 'https://unpkg.com/@popperjs/core@2.11.6/dist/umd/popper.css';

const tippyStylesheet = document.createElement('link');
tippyStylesheet.rel = 'stylesheet';
tippyStylesheet.href = 'https://unpkg.com/tippy.js@6.3.3/dist/tippy.css';

const popperScript = document.createElement('script');
popperScript.src = 'https://unpkg.com/@popperjs/core@2.11.6/dist/umd/popper.js';

const tippyScript = document.createElement('script');
tippyScript.src = 'https://unpkg.com/tippy.js@6.3.3/dist/tippy.umd.js';
tippyScript.onload = function() {
  const customStyles = document.createElement('style');
  customStyles.innerHTML = `
    .custom-theme {
      background-color: #1c00d4;
      color: #ffffff;
      border-radius: 10px;
    }

    .custom-theme .tippy-arrow {
      color: #0012d4;
    }

    .tippy-box {
      background-color: Green;
    }

    .tippy-content {
      font-size: 20px;
    }
  `;

  var inputElement = document.getElementById('UserName');

  if (inputElement) {
    console.log('Selected file:');
    inputElement.addEventListener('focus', function() {
      inputElement._tippy.show();
    });

    tippy(inputElement, {
      content: 'Here you enter the first name, firstname should contain no numbers',
      theme: 'custom-theme',
      placement: 'right',
      arrow: true,
      duration: 300,
      delay: [500, 0],
      maxWidth: 200
    });
  }

  var headElement = document.getElementsByTagName(\"head\")[0];
  headElement.appendChild(popperStylesheet);
  headElement.appendChild(tippyStylesheet);
  headElement.appendChild(tippyScript);
  headElement.appendChild(popperScript);
  headElement.appendChild(customStyles);
};

var headElement = document.getElementsByTagName(\"head\")[0];
headElement.appendChild(popperStylesheet);
headElement.appendChild(tippyStylesheet);
headElement.appendChild(tippyScript);
headElement.appendChild(popperScript);
")

I don't have any way to check whether this tippy method is defined, it often throws this error

Uncaught ReferenceError: tippy is not defined
    at tippyScript.onload (eval at executeScript (login.do:476:16), <anonymous>:47:5)

Is there any way can we check whether this method is defined correctly before we call it? I have even used sleep 3 as shown above before we execute it but still I am getting this error often.

Functions in JS are "first class objects". When you define a function f() {}, you're just creating a function (anonymous for a very little while) and storing its reference in a variable called f. You can check for the existence of f (and its type, etc) in the same way you would check for any other variable.

Example:

function f1() { console.log ("I am f1()!"); }
var f3 = f1;    // Both variables will reference the same actual function

console.log ("f1 is a " + typeof f1);
console.log ("f2 is a " + typeof f2);
console.log ("f3 is a " + typeof f3);

if (typeof f1 != "undefined") f1();
if (typeof f2 != "undefined") f2();
if (typeof f3 != "undefined") f3();

Output:

f1 is a function
f2 is a undefined
f3 is a function
I am f1()!
I am f1()!