NextJS中页面源的动态SSR假栈

pdkcd3nj  于 2023-06-05  发布在  其他
关注(0)|答案(1)|浏览(178)

如何在NextJS 12的生产模式下禁用页面源中的此堆栈?我试着搜索,但没有找到任何解决方案。

at Suspense
    at LoadableComponent (D:\nep-meds\public\node_modules\next\dist\shared\lib\loadable.js:85:9)
    at BloodBank (webpack-internal:///./src/pages/blood-bank/index.jsx:51:22)
    at main
    at div
    at AppLayout (webpack-internal:///./src/containers/Layout/AppLayout.js:28:22)
    at CheckoutProvider (webpack-internal:///./src/context/Checkout/CheckoutProvider.js:50:29)
    at CartProvider (webpack-internal:///./src/context/Cart/CartProvider.js:68:25)
    at LayoutProvider (webpack-internal:///./src/context/Layout/LayoutProvider.js:22:27)
    at AuthProvider (webpack-internal:///./src/context/Auth/AuthProvider.js:45:25)
    at MainContext (webpack-internal:///./src/context/index.js:19:24)
    at ErrorBoundary (webpack-internal:///./src/components/Error/index.js:24:9)
    at main
    at App (webpack-internal:///./src/pages/_app.jsx:53:16)
    at ae (D:\nep-meds\public\node_modules\styled-components\dist\styled-components.cjs.js:1:13282)
    at StyleRegistry (D:\nep-meds\public\node_modules\styled-jsx\dist\index\index.js:449:36)
    at PathnameContextProviderAdapter (D:\nep-meds\public\node_modules\next\dist\shared\lib\router\adapters.js:60:11)
    at AppContainer (D:\nep-meds\public\node_modules\next\dist\server\render.js:290:29)
    at AppContainerWithIsomorphicFiberStructure (D:\nep-meds\public\node_modules\next\dist\server\render.js:326:57)
    at div
brc7rcf0

brc7rcf01#

我找到了解决办法。这可能不是更好的方法,而是使用next/dynamic,我创建了自己的自定义组件,如react-no-ssr模块。

import React from "react";

const NoSSR = ({ children, fallback }) => {
  const [mounted, setMounted] = React.useState(false);

  React.useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return fallback;
  }

  return children;
};

export default NoSSR;

相关问题