Next.js App目录刷新嵌套路由触发ReferenceError问题求助

问题场景 #

开发基于Next.js + ChakraUI的项目时，遇到以下异常：

• 访问profile、store这类嵌套路由后刷新页面，应用直接崩溃，控制台抛出错误：Uncaught (in promise) ReferenceError: Cannot access 'AuthModal' before initialization
• 访问category路由时，刷新操作完全正常

项目核心架构包含三个目录：

• App/：存放所有路由文件
• Theme/：ChakraUI的样式配置文件
• Components/：包含根布局组件及所有业务组件

排查过程 #

1. 最初怀疑是循环依赖问题，用Madge工具检测后未发现异常
2. 尝试移除AuthModal组件中用于根据props渲染子组件的renderContent函数（代码如下），应用仍能运行，但错误依旧存在

function renderContent(type: AuthTypeEnum): React.ReactElement {
  switch (type) {
    case 'login':
      return <LoginForm />
    case 'register':
      return <RegisterForm />
    case 'forgot':
      return <ForgotPassForm />
    default:
      return <Text>Error</Text>
  }
}

解决方法 #

查阅Next.js相关Issues后定位到问题根源：AuthModal的子组件使用了别名import TextField from "@/components"导入组件，导致隐性循环引用。将别名导入改为相对路径导入后，错误彻底消失。

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