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

Question

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.

Diego Ferruchelli · Accepted Answer · 2023-02-18T20:04:51.020

0

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()!

edited Feb 18 '23 at 20:04

answered Feb 18 '23 at 19:48

Diego Ferruchelli

359
1
5

There are several good posts in Stack Overflow addressing how to check the existence and the type of a variable (not just for functions), but they deal with some subtleties of the language that may be too much for your actual needs. – Diego Ferruchelli Feb 18 '23 at 20:18
Hi, Thank you very much. This post explains about to check whether the function is defined. But my problem is, I have to define a function no matter what. If there is an error undefined, then I have to redefine it or I have to wait until the method gets defined, how do I do it? – Rajagopalan Feb 19 '23 at 03:29
..... Oh yes, That's what I asked in the question. But can you please help me as to how to wait until method gets defined so tippy method not defined error will not be thrown? – Rajagopalan Feb 19 '23 at 03:53
It seems you have to define the `onload` property **before** the `src` property (on the element referenced by the variable `tippyScript`) (just to be safe). Check the answer to [this post](https://stackoverflow.com/questions/16230886/trying-to-fire-the-onload-event-on-script-tag). – Diego Ferruchelli Feb 19 '23 at 16:44
I see you call `appendChild()` with all properties already in place (the order shouldn't matter). But I'm trying to run your code and I also receive the `Uncaught ReferenceError: tippy is not defined`. There's something wrong with your paths to the other libraries, and that's preventing `typpy` to load. – Diego Ferruchelli Feb 19 '23 at 18:08

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

1 Answers1