I’m working on a project using Next.js 14.2.3 (App Router) and I’m trying to implement a modal that opens when navigating to a nested route like /article/[id]/test. The idea is that the modal opens over the content from the route /article/[id].

Project Structure:

app
└─ [lang]
    └─ (main)
      └─ data
         └─ article
            ├─ [id]
            │  ├─ layout.tsx         // Layout that handles the article page and the modal
            │  ├─ page.tsx           // Main page for article/[id]
            │  └─ @modal             // Folder for parallel routes (modal)
            │     ├─ default.tsx    // Component to prevent 404
            │     └─ test
            │        └─ page.tsx   // Modal for article/[id]/test

What I want to achieve:

• Display the main article page at /article/[id] (Server Component).
• Open a modal at /article/[id]/test while keeping the article content in the background, without fully reloading the page or redirecting to a new one.
• If the user directly accesses /article/[id]/test, I want the article content to still be displayed in the background along with the modal.

The content inside the modal is dynamic, so I only want to make the database request when the user navigates to the modal route (/article/[id]/test).

The problem:
When I try to access the modal route, I get the following error:
TypeError: Cannot read properties of undefined (reading 'clientModules')

I’ve tried different configurations in layout.tsx and the @modal folder, but the error persists. My project is set up with Next.js 14.2.3.

Components:
Here is my current implementation of layout.tsx and default.tsx:

// layout.tsx (handles the article page and the modal)
export default function ArticleLayout({
  children,
  modal
}: {
  children: React.ReactNode,
  modal: React.ReactNode
}) {
  return (
    <div>
      {children}   {/* Main content (article) */}
      {modal}      {/* Modal */}
    </div>
  );
}

// default.tsx (prevents 404 when no modal is active)
export default function Default() {
  return null;
}

What could be causing this issue or how can I resolve it?

I tried setting up parallel routes with the @modal folder in Next.js 14.2.3 to open a modal on the /article/[id]/test route, updating Next to newest versión, delete node_modules and .next folder.
I expected the modal to appear over the article content without a full page reload. However, instead of opening the modal, I encountered a TypeError: Cannot read properties of undefined (reading ‘clientModules’).