Next.js集成ChakraUI构建失败：useMemo引用未定义问题

为优化SEO、包体积及页面性能，我正将基于Create React App的SPA迁移至Next.js，但执行next build时所有页面均报错：TypeError: Cannot read properties of null (reading 'useMemo')，错误源自ChakraUI的ThemeProvider，疑似无法正常访问React的useMemo。

相关代码 #

_app.js #

import Layout from '../components/layout.js';
import '../styles/fonts.css';
import '../styles/swatches.css';
import '../styles/pdf.css';
import { ChakraProvider } from '@chakra-ui/react';
import theme from '../styles/theme.js';

export default function App({ Component, pageProps }) {
    return (
        <ChakraProvider theme={theme}>
            <Layout>
                <Component {...pageProps} />
            </Layout>
        </ChakraProvider>
    );
}

_document.js #

import { Html, Head, Main, NextScript } from 'next/document'
import { ColorModeScript } from '@chakra-ui/react'

export default function Document() {
  return (
    <Html lang="en" style="scroll-behavior:smooth">
      <Head>
      <meta charset="utf-8" />
        <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="theme-color" content="#000000" />
        <meta
        name="dibiagg.io"
        content="Anthony Di Biaggio's personal website"
        />
        <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
        <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
        <script src="https://cdn.socket.io/4.5.0/socket.io.min.js" integrity="sha384-7EyYLQZgWBi67fBtVxw60/OWl1kjsfrPFcaU0pp0nAh+i8FD068QogUvg85Ewy1k" crossorigin="anonymous"></script>
        <title>dibiagg.io</title>
      </Head>
      <body>
        <ColorModeScript />
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

layout.js #

import Nav from './Nav.js'
import ContactFooter from './ContactFooter.js'
import Banner from './Banner.js'
import { FaGithub } from 'react-icons/fa'

export default function Layout({ children }) {
    return (
      <>
        <Banner header="DIBIAGG.IO is open source!" action="Check it out on Github." buttonText="Go" buttonIcon={<FaGithub />} onClick={() => {window.open("https://github.com/anthonydibi/dibiagg.io")}}/>
        <Nav />
        <main>{children}</main>
        <ContactFooter/>
      </>
    )
}

已尝试的操作 #

• 移除ChakraUI主题配置，出现useContext未定义错误
• 移除ChakraProvider后，使用ChakraUI样式的组件出现类似React钩子未定义的错误

内容的提问来源于stack exchange，提问作者boatboat