如何解决 Next.js 中的“未定义窗口”错误
Posted
技术标签:
【中文标题】如何解决 Next.js 中的“未定义窗口”错误【英文标题】：How to solve 'window is not defined' error in Next.js 【发布时间】：2021-07-23 02:12:48 【问题描述】：我在我的应用程序中遇到以下错误：
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;
我尝试了几种我在那里发现的替代方案，但我无法解决这个问题，如果有人可以帮助我，谢谢你
【问题讨论】：
你为什么要做像`document.getElementById`是一个React应用程序？ 事实上这是一个 html 模板，我试图将它传递给 Next.js，我想尽可能少地改变它，但我相信我必须改变它 【参考方案1】：当您在服务器端加载脚本wrapper.js 时，它会被执行，并且服务器上没有window 对象，因此会出现错误。
【讨论】：
以上是关于如何解决 Next.js 中的“未定义窗口”错误的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Nuxt.js 中使用 CKEditor - 未定义窗口错误
“未定义窗口中的错误” webpack 上的 webpack 一般错误 --mode=production --env.prod
如何忽略 Next.js 组件中导致单元测试中的解析错误的 CSS 模块导入