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

Question

I am encountering the following error in my application:

I imported my js file in _app.js and I start to get this error, I would like to know how I can use my script in my application the script code is as follows:

    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');
            }
        }
    }
}

and imported it that way:

 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;

I tried several alternatives that I found out there and I could not solve this something is going unnoticed if someone can help me thank you

Why are you doing things like ` document.getElementById` is a React application? — T J
– T J, Commented Apr 29, 2021 at 17:12
in fact this is an html template that I'm trying to pass to Next.js and I wanted to change it as little as possible, but I believe that I will have to change that — walter calegari
– walter calegari, Commented Apr 29, 2021 at 17:41

Ivan V. · Accepted Answer · 2021-04-29 18:20:17Z

1

When you load your script wrapper.js server-side, it gets executed, and there is no window object on the server, hence the error.

answered Apr 29, 2021 at 18:20

Ivan V.

8,1692 gold badges39 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related