Next.js Discord

Discord Forum

Intercepting / Parallel route w/modal causing application error

Answered
American Wirehair posted this in #help-forum
Open in Discord
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

@American Wirehair 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?
Ray
try create a layout.tsx inside app/(site) and render the modal props in it
@Ray try create a `layout.tsx` inside `app/(site)` and render the modal props in it
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>
  );
}
American WirehairOP
this is (site)/layout.tsx which is the top level since i have app/api and app/(site)
Ray
oh ok let me see
@American Wirehair 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?
Ray
try moving app/(site)/@modal/(.)user/default.tsx to app/(site)/@modal/default.tsx
Answer
@Ray try moving `app/(site)/@modal/(.)user/default.tsx` to `app/(site)/@modal/default.tsx`
American WirehairOP
no joy, didnt work 😦
@American Wirehair no joy, didnt work 😦
Ray
what error do you get?
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 ...
``
Ray
goto /users > /users/[id] and the error appear?
American WirehairOP
brooooo
i just deleted .next dir and it works
that's with default.tsx in the @modal/ dir
Ray
yea
I cloned your repo and got 404
American WirehairOP
fml
Ray
after I moved the default.tsx and it work
American WirehairOP
nice man, thank you for working it through with me!
Messi GOAT
American WirehairOP
Thanks again mate
@American Wirehair i just deleted `.next` dir and it works
Masai Lion
worked for me. but i dont know why!