Refresh a nested route with next.js app folder causes ReferenceError

Question

I have a project in which I am using Next.js with ChakraUI, I am facing an unexpected and unknown error, when I access any nested route and refresh the application dies and returns an error saying:

Uncaught (in promise) ReferenceError: Cannot access 'AuthModal' before initialization

I have tried thousands of alternatives to fix this error but nothing works. I believe it is related to the next.js application folder, but I haven't tested it yet to say anything!

I followed all the recommendations of the libraries I'm using (Next.js and chakraUI)

The project architecture revolves around 3 main folders:

• App folder: next.js folder where all the routes are located;
• Theme folder: where all the stylizations and configurations of the UI chakra are located, following the chakra recommendations;
• Components folder: place where all components used in the application are made, including layout component (responsible for the root layout of the app);

I currently have 3 nested routes configured: category, profile and store

When I access the category and refresh, everything works as expected but if I do the same procedure on the other routes, the error unfortunately happens.

After a conversation with a dev friend, he told me that it could be circular dependencies, however, after debugging the code and running Madge (library that detects circular dependencies in the project), no circular dependencies were found.

Note: Auth Modal receives 3 child components: login, signUp and forgotPass. To render them correctly I need to pass a type props and make the following condition for them to be displayed according to the type passed:

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>
  }
}

When removing the function from the component, the app continues to work at least, but the error still occurs...

Reading the Next.js issues I found one that helped me remove the app crash, AuthModal was with circular reference. The child components were importing the textField component from the same components folder with the alias 'import TextField from "@/components", when I removed the alias, the error disappeared.