0%

Window Not Defined In NextJS 解决方法

问题

Nextjs 项目引入 print-js 报错,window is not defined.

查了一下,得知 NextJs 是服务器端渲染,在 Node 中是没有 Window 对象的,所以报错。

解决

网上也给了 3 个办法但不适合我

我直接抄一下这 3 个方法

1. Use the useEffect hook

1
2
3
4
5
6
7
8
9
import React from 'react';

const Image = (props) => {
const [width, setWidth] = React.useState(0);
React.useEffect(() => {
setWidth(window.innerWidth);
});
return <img src={props.src} style={{ width: width }} />;
};

2. Check the environment

1
2
3
4
5
6
7
8
9
import Cookies from 'js-cookie';

const Hello = () => {
let name = '';
if (typeof window !== 'undefined') {
name = Cookies.get('name');
}
return <div>Hi {name}</div>;
};

3. Use dynamic imports

1
2
3
4
5
6
7
8
9
10
11
12
13
import dynamic from 'next/dynamic';

const Image = dynamic(() => import('./image'), { ssr: false });

function Home() {
return (
<div>
<Image src='/cat.png' />
</div>
);
}

export default Home;

我自己的解决方法 import()

import() 方法返回一个 Promise,加载后打印了一下发现不能像 require() 或者 import xxx from 'xxx' 那样使用,具体看你引入的项目,我这放到的 default 里了

1
2
3
4
5
6
7
8
9
10
11
12
if (typeof window !== 'undefined') {
// browser code
let { default: printJS } = await import('print-js');
printJS({
printable: selectedOrders.map((e) => ({
...e,
type: type[e.inventoryType],
})),
properties: ['barCode', 'userCode', 'type'],
type: 'json',
});
}

参考

https://frontend-digest.com/why-is-window-not-defined-in-nextjs-44daf7b4604e
https://dev.to/vvo/how-to-solve-window-is-not-defined-errors-in-react-and-next-js-5f97
https://nextjs.org/docs/advanced-features/dynamic-import