Uncaught (in promise) TypeError: notyf is undefined

Full Error:

Uncaught (in promise) TypeError: notyf is undefined
    showMessage https://joke.infini.monster/static/js/index.js:39
    showMsg https://joke.infini.monster/static/js/index.js:102
    handleButtonClick https://joke.infini.monster/static/js/index.js:104
    onclick https://joke.infini.monster/index.php:1
2 index.js:39:13

I have it included in the html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="static/css/hello2.css">

    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.css">
    <link rel="stylesheet" type="text/css" href="static/assets/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="static/assets/fonts/Linearicons-Free-v1.0.0/icon-font.min.css">
    <link rel="stylesheet" type="text/css" href="static/assets/css/portal.css">

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Hello Page</title>
</head>

<body>
    <script src="static/js/index.js"></script>
    <script src='https://code.jquery.com/jquery-3.2.1.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js'></script>

    <h1>Dark Joke Generator by @Infinimonster</h1>

Javascript:

async function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

var notyf = new Notyf({
  types: [
    {
      type: 'info',
      background: 'blue',
      icon: {
        className: 'material-icons',
        tagName: 'i',
        text: 'info'
      }
    },
    {
      type: 'warning',
      background: 'orange',
      icon: {
        className: 'material-icons',
        tagName: 'i',
        text: 'warning'
      }
    }
  ]
});

// Function to show the success message
function showMessage(msgtype, msg) {
    var showMsg = document.getElementById("showMsg");

    // Check if the success message should be displayed
    if (showMsg.dataset.display !== 'false') {

        // Use Notyf for displaying success message
        if (msgtype == 'success') {
            notyf.success({
                message: msg,
                duration: 9500,
                dismissible: true
            });
        } else if (msgtype == 'warn') {
            notyf.open({
                type: "warning",
                message: msg,
                duration: 9500,
                dismissible: true
            });
        } else if (msgtype == 'info') {
            notyf.open({
                type: "info",
                message: msg,
                duration: 9500,
                dismissible: true
            });
        } else if (msgtype == 'error') {
            notyf.error({
                message: msg,
                duration: 9500,
                dismissible: true
            });
        }
    }
}

function copyToClipboard(text) {
    // Create a temporary input element
    const tempInput = document.createElement('input');
    tempInput.value = text;

    // Append the input element to the DOM
    document.body.appendChild(tempInput);

    // Select the text inside the input element
    tempInput.select();
    tempInput.setSelectionRange(0, 99999); // For mobile devices

    // Copy the selected text to the clipboard
    document.execCommand('copy');

    // Remove the temporary input element from the DOM
    document.body.removeChild(tempInput);

    // Show a notification or perform any other action if needed
    showMessage('success', 'Joke have been automatically copied to your clipboard!');
    //showMessage('warn', 'Joke copied to clipboard!');
    //showMessage('info', 'Joke copied to clipboard!');
    //showMessage('error', 'Joke copied to clipboard!');
}

async function showJoke(joke) {
    console.log(joke);
    var jokeElement = document.getElementById('joke');
    jokeElement.innerHTML = joke;
}

// Add this function to your existing JavaScript file
async function handleButtonClick(type, message, joke) {
    function showMsg() {
      showMessage(type, message);
    }
    showMsg();

    //showJoke(joke);

    try {
        // Fetch a new joke from the server
        const response = await fetch('/joke');

        if (!response.ok) {
            throw new Error('Failed to fetch new joke');
        }

        // Parse the response text (assuming it's a plain string)
        const newJoke = await response.text();

    copyToClipboard(newJoke);

        // Run showJoke() with the new joke
        showJoke(newJoke);
    } catch (error) {
        console.error('Error fetching or processing new joke:', error);
    }
  }

caroso1222 / notyf

Uncaught (in promise) TypeError: notyf is undefined #138