Nextjs 中没有显示错误答案

【问题标题】：No errors displayed in NextjsNextjs 中没有显示错误
【发布时间】：2022-01-25 22:38:46
【问题描述】：

我有一个大型 create-react-app 项目，我正在尝试将其迁移到 NextJS。我使用 create-next-app 开始了一个新的 Next 项目，并且我正在一个一个地复制所有文件。我的页面的主要部分是客户端渲染，因为我有很多交互式用户体验。为此，我使用的是我在网上找到的代码：

export default dynamic(
    () => import('../../../components/ProjectEditorPage/ProjectEditorPage'),
    { ssr: false }
)

此代码有效，因为有时会呈现页面。我的问题是发生错误时没有显示错误，页面只是变白。命令行或开发工具控制台中也没有显示任何内容。如果我尝试使用基本的服务器端渲染，我会收到以下错误，但没有任何进一步的信息、位置、组件或文件名：

error - Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

我理解这个错误。我只是无法在我的项目中找到它，因为没有显示更多信息。我的 NextJS 设置错了吗？为什么与使用 React 相比，我得到的错误信息要少得多？在 React 中，错误总是非常明确地指定。

【问题讨论】：

你能提供一个minimal reproducible example吗？

标签： reactjs typescript next.js

【解决方案1】：

您可以将错误边界添加到您的 _app.js 文件中以获取有关错误的更多详细信息。

https://reactjs.org/docs/error-boundaries.html

componentDidCatch(error, info) {
    console.log('info: ', info);
    console.log('error: ', error);
  }

【讨论】：

【解决方案2】：

我通过实现以下钩子暂时解决了这个问题：

// useIsBrowser.ts

const useIsBrowser = () => 
{
    const [ isBrowser, setIsBrowser ] = useState(false);

    useEffect(() =>
    {
        // this hook only runs inside of the browser
        setIsBrowser(true);
    }, []);

    return isBrowser;
}

export default useIsBrowser;

...然后可以通过以下方式使用...


    // inside some react component
    const isBrowser = useIsBrowser();

    if (!isBrowser) return null;

我仍然收到来自 NextJs 的错误，说它发现 SSR 和 CSR 页面之间存在差异。以后我会努力消除这个错误，因为这不是什么大问题。

【讨论】：