使用 React.lazy() 时开发构建崩溃

Question

我正在使用 react Lazy 和 Suspense 来加载组件，但是如果我尝试使用npm run build 构建应用程序，我会收到一条错误消息：错误：未捕获的错误：最小化的响应错误 #294；，而且如果我评论延迟加载，构建就会成功。代码：

import { Suspense, lazy } from 'react';
const Component= lazy(() => import('./../location'));

const Homepage=()=>{
  return (
    <>
      <Suspense fallback={<div>Loading...</div>}>                
        <Component/>
      </Suspense>
    </>
  )
}
export default Homepage;

Answer 1

当我们使用 ssr（服务器端渲染）或 ReactDOMServer 时，这个错误基本上发生在路径中，

由于 ReactDOMServer 尚不支持 React.lazy 和 Suspense，您需要使用动态导入并删除 Suspense 和 React.lazy 以避免此错误。

Answer 2

要解决这个问题，需要在前面加载 Suspense 组件。仅当存在窗口变量时，下一个示例useEffect才使用 Suspense 组件。window 变量仅在浏览器中使用。

export const GuardLazyComponentToSSR: FunctionComponent = () => {
    const [isFront, setIsFront] = useState(false);

    useEffect(() => {
        process.nextTick(() => {
            if (globalThis.window ?? false) {
                setIsFront(true);
            }
        });
    }, []);

    if (!isFront) return null;

    return <Suspense fallback={() => 'loading'}>
        <MyLazyComponent></MyLazyComponent>
    </Suspense>;
}