Как решить ошибку "окно не определено" в Next.js

В своем приложении я обнаружил следующую ошибку:

ошибка, которую next.js возвращает мне

Я импортировал свой js-файл в _app.js и начинаю получать эту ошибку, я хотел бы знать, как я могу использовать свой скрипт в своем приложении, код скрипта выглядит следующим образом:

          function toggleDD(myDropMenu) {
        document.getElementById(myDropMenu).classList.toggle("invisible")
    }
    
     function filterDD(myDropMenu, myDropMenuSearch) {
        var input, filter, ul, li, a, i;
        input = document.getElementById(myDropMenuSearch);
        filter = input.value.toUpperCase();
        div = document.getElementById(myDropMenu);
        a = div.getElementsByTagName("a");
        for (i = 0; i < a.length; i++) {
            if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
                a[i].style.display = "";
            } else {
                a[i].style.display = "none";
            }
        }
    }
window.onclick = function(event) {
    if (!event.target.matches('.drop-button') && !event.target.matches('.drop-search')) {
        var dropdowns = document.getElementsByClassName("dropdownlist");
        for (var i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (!openDropdown.classList.contains('invisible')) {
                openDropdown.classList.add('invisible');
            }
        }
    }
}

и импортировал его таким образом:

       import "tailwindcss/tailwind.css";
    import '../public/wrapper'
    
    import Head from "next/head";
    
    function MyApp({ Component, pageProps }) {
      return (
        <>
          <Head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <meta http-equiv="X-UA-Compatible" content="ie=edge" />
            <title>Tailwind Admin Starter Template : Tailwind Toolbox</title>
            <meta name="author" content="name" />
            <meta name="description" content="description here" />
            <meta name="keywords" content="keywords,here" />
    
            <link
              rel="stylesheet"
              href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
            />
            <link
              href="https://unpkg.com/tailwindcss/dist/tailwind.min.css"
              rel="stylesheet"
            />
            <link
              href="https://afeld.github.io/emoji-css/emoji.css"
              rel="stylesheet"
            />
            <script
              src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"
              integrity="sha256-xKeoJ50pzbUGkpQxDYHD7o7hxe0LaOGeguUidbq6vis="
              crossorigin="anonymous"
            ></script>
             <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet" />
            
          </Head>
    
          <Component {...pageProps} />
          <script src="/wrapper.js"></script>
        </>
      );
    }

export default MyApp;

Я пробовал несколько альтернатив, которые я нашел там, и я не мог решить это, что-то остается незамеченным, если кто-то может мне помочь, спасибо

Источник

1 ответ

Решение

Когда вы загружаете свой скрипт wrapper.js на стороне сервера, он запускается, и нет window объект на сервере, отсюда и ошибка.

Источник
Другие вопросы по тегам