Next.js Discord

Discord Forum

Intercepting dynamic routes with @modal error on client side

Unanswered
Masai Lion posted this in #help-forum
Open in Discord
Masai LionOP
I've been trying to intercept a dynamic route, as shown in the folder structure attached, and on the terminal it says that it is compiling the intercepting modal route:
○ Compiling /gallery/[filter]/(.)[image_id] ...
✓ Compiled /gallery/[filter]/(.)[image_id] in 1001ms (918 modules)

However, on the client side I get the followng error displayed:
"Application error: a client-side exception has occurred (see the browser console for more information)."

And this is what is says in the chrome dev tools console:

Uncaught TypeError: initialTree is not iterable
at applyPatch (apply-router-state-patch-to-tree.js:17:53)
at applyRouterStatePatchToTree (apply-router-state-patch-to-tree.js:74:30)
at applyRouterStatePatchToTree (apply-router-state-patch-to-tree.js:76:30)
at applyRouterStatePatchToTree (apply-router-state-patch-to-tree.js:76:30)
at eval (navigate-reducer.js:142:88)Understand this error
app-index.js:33
The above error occurred in the <Router> component:
at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:207:11)
at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:113:9)
at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11)
at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:585:13)
at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:112:27)
at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:117:11)

2 Replies

@Masai Lion I've been trying to intercept a dynamic route, as shown in the folder structure attached, and on the terminal it says that** it is** compiling the intercepting modal route: ○ Compiling /gallery/[filter]/(.)[image_id] ... ✓ Compiled /gallery/[filter]/(.)[image_id] in 1001ms (918 modules) However, on the client side I get the followng error displayed: "Application error: a client-side exception has occurred (see the browser console for more information)." And this is what is says in the chrome dev tools console: Uncaught TypeError: initialTree is not iterable at applyPatch (apply-router-state-patch-to-tree.js:17:53) at applyRouterStatePatchToTree (apply-router-state-patch-to-tree.js:74:30) at applyRouterStatePatchToTree (apply-router-state-patch-to-tree.js:76:30) at applyRouterStatePatchToTree (apply-router-state-patch-to-tree.js:76:30) at eval (navigate-reducer.js:142:88)Understand this error app-index.js:33 The above error occurred in the <Router> component: at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:207:11) at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:113:9) at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11) at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:585:13) at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:112:27) at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:117:11)
Masai LionOP
Also, please see my root layout page below, where I have included the modal:
export default function RootLayout({
  children, modal
}: Readonly<{
  children: React.ReactNode;
  modal: React.ReactNode;
}>) {
  return (
    <html lang="en" className="overflow-x-hidden">
      <body className={`${hero2.variable} ${body.variable} ${header1.variable} ${hero1.variable} bg-colour overflow-x-hidden m-0 p-0 flex flex-col min-h-screen`}>
        <MainHeader links={[{ route: "/", text: "Home" }, { route: "/gallery/cakes", text: "Gallery" }, { route: "/quote", text: "Request a quote" }]} />
        <main className="flex-grow">
          {children}
          {modal}
        </main>
        <Footer />
      </body>
    </html>
  );
}
Masai LionOP
I updated next and I no longer get the client-side error, however, now my modal is not displaying at all for some reason? v0 suggests that I need to add a 'show' prop to the modal component to determine when it should be displayed but I don't feel like that is necessary