reactjs - 如何解决 Next.js 中的“未定义窗口”错误
问题描述
我在我的应用程序中遇到以下错误:
我在 _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;
我尝试了几种我在那里发现的替代方案,但我无法解决这个问题,如果有人可以帮助我,我会被忽视,谢谢
解决方案
当您在wrapper.js
服务器端加载脚本时,它会被执行,并且服务器上没有window
对象,因此会出现错误。
推荐阅读
- c# - C# 同时支持 x64 和 x86
- php - 获取主键和外键匹配/不匹配的两个表的数据
- git - 拆分主存储库后同步管理存储库
- sql - 我的查询中没有索引(PostgreSQL)
- php - 在 Laravel 中区分 GET 和 POST 请求与路由
- python - 如何加快从压缩的 HDF5 文件中读取的速度
- chef-infra - Ohai plugin_path 未在 Windows 10 上加载
- r - 查找具有匹配日期组件的第一个日期时间元素的索引
- apache-kafka - Goldengate 将 oracle 10g 实时复制到 kafka
- django - 在 Django 中使用 Jinja2 {{ variable }} into {% instructions %}