如何解决 Next.js 中的 'window is not defined' 错误

Question

我在应用程序中遇到以下错误：

error that next.js returns to me

我在 _app.js 中导入了我的 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;

我尝试了几种我在那里找到的替代方法，但我无法解决这个问题，如果有人可以帮助我，我会被忽视，谢谢

Answer 1

当您在服务器端加载脚本 wrapper.js 时，它会被执行，但服务器上没有 window 对象，因此出现错误。

如何解决 Next.js 中的 'window is not defined' 错误

How to solve 'window is not defined' error in Next.js

reactjs

window

next.js

tailwind-css

tailwind-in-js