Next.js Discord

Discord Forum

Intercepting / Parallel route w/modal causing application error

Answered
American Wirehair posted this in #help-forum
Open in Discord
Avatar
American WirehairOP
I am creating a user modal to intercept the user route on my project, but it appears to be causing an Application Error for which i am utterly confused.

Project structure
├ app
│   ├── (site)
│   │   ├── @modal
│   │   │   ├── (.)user
│   │   │   │   ├── [id]
│   │   │   │   │   ├── page.tsx
│   │   │   │   ├── default.tsx
│   ├── user
│   │   ├── [id]
│   │   │   ├── page.tsx
│   ├── users
│   │   ├── page.tsx
│   ├── layout.tsx
│   ├── page.tsx


layout.tsx
Layout contains the slot {props.modal} inside the <body> tag.

default.tsx
Default returns null.

@modal/(.)user/[id]/page.tsx
Contains the shadcn/ui <Dialog open> with some hardcoded text.

The general problem
Navigating from /users to /user/id causes an Application Error at which point the URL is still /users, hitting the back button updates URL to /user/123.. where if a refresh the application it shows the user page. Is this something to do Route Groups?
Answered by Ray
try moving app/(site)/@modal/(.)user/default.tsx to app/(site)/@modal/default.tsx
View full answer

22 Replies

Avatar
Ray
try create a layout.tsx inside app/(site) and render the modal props in it
Avatar
American WirehairOP
Hey @Ray thanks for the reply, my layout.tsx is rendering the slot as a prop...
export default function DefaultLayout(props: {
  children: React.ReactNode;
  modal: React.ReactNode;
}) {
  return (
    <html lang="en">
      <ThemeProvider>
        <body className="...">
          <NextAuthProvider>
            <Header />
            {props.children}
            {props.modal}
            <Toaster position="top-center" />
          </NextAuthProvider>
        </body>
      </ThemeProvider>
    </html>
  );
}
Avatar
Ray
is this app/layout.tsx?
Avatar
American WirehairOP
this is (site)/layout.tsx which is the top level since i have app/api and app/(site)
App directory: https://github.com/mattsince87/nextauth-prisma/tree/main/src/app
Avatar
Ray
oh ok let me see
Avatar
Ray
try moving app/(site)/@modal/(.)user/default.tsx to app/(site)/@modal/default.tsx
Answer
Avatar
American WirehairOP
no joy, didnt work 😦
Avatar
Ray
what error do you get?
Avatar
American WirehairOP
Browser
Application error: a client-side exception has occurred (see the browser console for more information).

Console
Uncaught TypeError: initialTree is not iterable
    at ...
``
Avatar
Ray
goto /users > /users/[id] and the error appear?
Avatar
American WirehairOP
brooooo
i just deleted .next dir and it works
that's with default.tsx in the @modal/ dir
Avatar
Ray
yea
I cloned your repo and got 404
Avatar
American WirehairOP
fml
Avatar
Ray
after I moved the default.tsx and it work
Avatar
American WirehairOP
nice man, thank you for working it through with me!
Messi GOAT
Avatar
Ray
you're welcome
Avatar
American WirehairOP
Thanks again mate
Avatar
Masai Lion
worked for me. but i dont know why!