NextJS 中 'window is not defined' 错误的解决方法

问题

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

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

解决

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

我直接抄一下这 3 个方法

1. Use the useEffect hook

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

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

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 里了

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