在我的Next.js应用程序中，我似乎无法访问窗口:
未处理的拒绝(ReferenceError):没有定义窗口
componentWillMount() {
console.log('window.innerHeight', window.innerHeight);
}
当前回答
日期:06/08/2021
检查窗口对象是否存在，然后跟随代码进行操作。
function getSelectedAddress() {
if (typeof window === 'undefined') return;
// Some other logic
}
其他回答
没有SSR
https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr
import dynamic from 'next/dynamic'
const DynamicComponentWithNoSSR = dynamic(
() => import('../components/hello3'),
{ ssr: false }
)
function Home() {
return (
<div>
<Header />
<DynamicComponentWithNoSSR />
<p>HOME PAGE is here!</p>
</div>
)
}
export default Home
对于这种情况，Next.js具有动态导入功能。
对于包含只在浏览器中工作的库的模块，建议使用动态导入。请参考
“嗡�̶b̶r̶o̶w̶s̶e̶r̶ ̶t̶ ̶j̶u̶s̶t̶ ̶e̶x̶e̶c̶u̶t̶e̶ ̶y̶o̶u̶r̶ ̶c̶o̶m̶m̶a̶n̶d̶d̶u̶r̶n̶n̶ ̶r̶̶n̶n̶ ̶o̶n̶ ̶t̶ ̶c̶l̶i̶e̶n̶ ̶s̶i̶d̶e̶ ̶o̶n̶l̶y̶。
但是process object在Webpack5和NextJS中已经被弃用了，因为它是一个仅用于后端的NodeJS变量。
我们必须使用浏览器中的backwindow对象。
If (typeof window !== "undefined") { //客户端代码 ｝
其他解决方案是使用react钩子替换componentDidMount:
useEffect(() => { //客户端代码 })
在刷新页面时，我也遇到了同样的问题(由于导入与SSR不能很好地工作)。
对我来说，固定它的是去发生这种情况的页面，并迫使导入是动态的:
import dynamic from 'next/dynamic';
const SomeComponent = dynamic(()=>{return import('../Components/SomeComponent')}, {ssr: false});
//import SomeComponent from '../Components/SomeComponent'
注释掉原始导入并动态导入组件将强制组件的客户端呈现。
动态导入在Nextjs的文档中有介绍: https://nextjs.org/docs/advanced-features/dynamic-import
我通过观看youtube视频找到了这个解决方案: https://www.youtube.com/watch?v=DA0ie1RPP6g
日期:06/08/2021
检查窗口对象是否存在，然后跟随代码进行操作。
function getSelectedAddress() {
if (typeof window === 'undefined') return;
// Some other logic
}
