[NEXT-1166] Modal Interception does not work for (.)[dynamic] routes #49614

khuezy · 2023-05-10T15:23:08Z

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.3.0: Mon Jan 30 20:38:37 PST 2023; root:xnu-8792.81.3~2/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.14.0
      npm: 9.3.1
      Yarn: 1.22.19
      pnpm: 7.27.0
    Relevant packages:
      next: 13.4.2-canary.4
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/youthful-butterfly-l44fsy

To Reproduce

Go to sandbox and run the dev server.
Click on the "Photos" link
Click on "Go to /photos/[author]/[id]", where the author and id is "john/123"
The interception does not work, the [author] params is "(.)john"
Reload the page, the [author] params is "john"

Now go back to the root and click on the "Static" link. This route doesn't use dynamic routes and the interception works as expected.

Describe the Bug

When using dynamic routes in the modal, the interception of the current route does not work.
That is, when I'm on the "/photos" page, I want a modal-ize "/photos/[author]/[id]"

Expected Behavior

When on the "/photos" page, clicking on a child route should intercept the child modal.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

_NEXT-1166

abusada · 2023-05-11T07:02:47Z

I've been facing similar issue, it seems that using:

(...) to match segments from the root app directory.

Fixes it. see here https://codesandbox.io/p/sandbox/quizzical-cloud-oj5kkw

khuezy · 2023-05-11T13:28:04Z

@abusada Thanks! That should unblock me for now.

Manduro · 2023-05-11T15:24:40Z

Looks like a duplicate of #48143.

Using the (...) as a workaround only helps if your root segment is not dynamic.

khuezy · 2023-05-11T15:33:06Z

Is it really a duplicate? The title says that (...)[dynamic] does not work, but it works in latest canary.
The issue here is that (.)[dynamic] doesn't work

khuezy · 2023-05-11T18:54:09Z

I'm getting errors on rsc using (...) :/ EDIT: nvm, it was due to me using a custom Link component

Nithur-M · 2023-05-21T12:36:44Z

Looks like a duplicate of #48143.

Using the (...) as a workaround only helps if your root segment is not dynamic.

Yes, any updates on this one?
I am using dynamic routes as my root and facing this issue.

Nithur-M · 2023-05-24T11:07:53Z

I've been facing similar issue, it seems that using:

(...) to match segments from the root app directory.

Fixes it. see here https://codesandbox.io/p/sandbox/quizzical-cloud-oj5kkw

Hello, @abusada is it possible to use intercepting routes without using a folder to bind everything? I just want to display all the authors on the homepage without using /photo route

Morishiri · 2023-05-24T12:27:06Z

Originaly posted in the other linked issue, but seems it better fits here:

I also observed that having just dynamic [locale] in the root of my tree and trying to achieve NextGram behavior sometimes loads photo in modal, sometimes in regular page (didn't found a rule for it, looks like some race). May be related to this issue.

Nickman87 · 2023-06-02T12:57:01Z

I am having a similar issue, repo for testing is here: https://codesandbox.io/p/sandbox/nextjs-intercepting-routes-s9j6mo?file=%2Fpackage.json%3A17%2C29

Checked with latest canary (13.4.5-canary.3) and still present
@feedthejim

alejandrodev-vn · 2023-06-04T12:55:15Z

I also had the same problem:

Before I used folder [lang] to wrap: work

After I use folder [lang] to wrap: not work

Any fix this?

thomasschwinn · 2023-06-12T11:43:42Z

I have the same problem, with dynamic the root folder, intercepting does not work

### What? Paths with interception markers adjacent to dynamic segments are not correctly parsed, which leads to the path match logic failing. ### Why? `getParametrizedRoutes` checks for brackets but isn't expecting to receive an interception marker. For example, a path of `/photos/(.)[author]/[id]` results in the following regex: `/^\/photos\/$\.$\[author\]\/([^/]+?)(?:\/)?$/` This will not match a path of `/photos/(.)zack/1` since it retained the `[author]` brackets. `getSegmentParam` has a similar issue when getting values for path params, though we can just skip the interception markers and go straight to the params. Closes NEXT-1166, NEXT-1013 Fixes #48143 Fixes #49614 link NEXT-1013

kloczewiak · 2023-07-12T10:35:01Z

I don't think this got completely fixed by #51526
It only fixed it if you have nested dynamic routes like @modal/(.)[user]/[id]/page.tsx.
Something like @modal/(.)[author]/page.tsx still doesn't work.
Code sandbox forked from OP's example: https://codesandbox.io/p/sandbox/trusting-cray-fxlqlp?file=%2Fpackage.json%3A13%2C30

Should I create a new Issue?

tuandev777 · 2023-07-12T12:06:24Z

I also had the same problem:

Before I used folder [lang] to wrap: work

After I use folder [lang] to wrap: not work

Any fix this?

I got the same error with locale, have anyone try it yet ?

Netail · 2023-07-12T14:49:59Z

Facing the same issue with the following structure; (v13.4.9)

.
└── [locale]/
    ├── (program)/
    │   ├── programma/
    │   │   └── [slug]/
    │   │       └── [id]/
    │   │           └── page.jsx
    │   └── program/
    │       └── [slug]/
    │           └── [id]/
    │               └── page.jsx
    ├── @modal/
    │   ├── (.)programma/
    │   │   └── [slug]/
    │   │       └── [id]/
    │   │           └── page.jsx
    │   └── (.)program/
    │       └── [slug]/
    │           └── [id]/
    │               └── page.jsx
    └── layout.jsx

And the locale param become undefined

khuezy · 2023-07-12T14:58:53Z

It might be best to open a new issue w/ the examples.

kloczewiak · 2023-07-12T15:11:12Z

It might be best to open a new issue w/ the examples.

It turns out there's already #52533
Please forward future discussion to that issue

github-actions · 2023-08-12T00:03:33Z

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

khuezy added the bug Issue was opened via the bug report template. label May 10, 2023

khuezy changed the title ~~Modal Interception does not work for dynamic routes~~ Modal Interception does not work for (.)[dynamic] routes May 11, 2023

khuezy mentioned this issue May 15, 2023

13.3.0 Intercepting with grouped app does not work #48104

Closed

1 task

timneutkens added the linear: next Confirmed issue that is tracked by the Next.js team. label May 17, 2023

timneutkens changed the title ~~Modal Interception does not work for (.)[dynamic] routes~~ [NEXT-1166] Modal Interception does not work for (.)[dynamic] routes May 17, 2023

timneutkens mentioned this issue Jun 19, 2023

bugfix: route interception with dynamic paths #51526

Merged

kodiakhq bot closed this as completed in #51526 Jun 22, 2023

Netail mentioned this issue Jul 13, 2023

Intercepting parallel routes including dynamic route not working within the same directory #52533

Closed

1 task

github-actions bot added the locked label Aug 12, 2023

github-actions bot locked as resolved and limited conversation to collaborators Aug 12, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[NEXT-1166] Modal Interception does not work for (.)[dynamic] routes #49614

[NEXT-1166] Modal Interception does not work for (.)[dynamic] routes #49614

khuezy commented May 10, 2023 •

edited by timneutkens

Loading

abusada commented May 11, 2023 •

edited

Loading

khuezy commented May 11, 2023

Manduro commented May 11, 2023

khuezy commented May 11, 2023

khuezy commented May 11, 2023 •

edited

Loading

Nithur-M commented May 21, 2023

Nithur-M commented May 24, 2023

Morishiri commented May 24, 2023

Nickman87 commented Jun 2, 2023

alejandrodev-vn commented Jun 4, 2023 •

edited

Loading

thomasschwinn commented Jun 12, 2023

kloczewiak commented Jul 12, 2023

tuandev777 commented Jul 12, 2023

Before I used folder [lang] to wrap: work

After I use folder [lang] to wrap: not work

Netail commented Jul 12, 2023 •

edited

Loading

khuezy commented Jul 12, 2023

kloczewiak commented Jul 12, 2023

github-actions bot commented Aug 12, 2023

[NEXT-1166] Modal Interception does not work for (.)[dynamic] routes #49614

[NEXT-1166] Modal Interception does not work for (.)[dynamic] routes #49614

Comments

khuezy commented May 10, 2023 • edited by timneutkens Loading

Verify canary release

Provide environment information

Which area(s) of Next.js are affected? (leave empty if unsure)

Link to the code that reproduces this issue

To Reproduce

Describe the Bug

Expected Behavior

Which browser are you using? (if relevant)

How are you deploying your application? (if relevant)

abusada commented May 11, 2023 • edited Loading

khuezy commented May 11, 2023

Manduro commented May 11, 2023

khuezy commented May 11, 2023

khuezy commented May 11, 2023 • edited Loading

Nithur-M commented May 21, 2023

Nithur-M commented May 24, 2023

Morishiri commented May 24, 2023

Nickman87 commented Jun 2, 2023

alejandrodev-vn commented Jun 4, 2023 • edited Loading

Before I used folder [lang] to wrap: work

After I use folder [lang] to wrap: not work

thomasschwinn commented Jun 12, 2023

kloczewiak commented Jul 12, 2023

tuandev777 commented Jul 12, 2023

Before I used folder [lang] to wrap: work

After I use folder [lang] to wrap: not work

Netail commented Jul 12, 2023 • edited Loading

khuezy commented Jul 12, 2023

kloczewiak commented Jul 12, 2023

github-actions bot commented Aug 12, 2023

khuezy commented May 10, 2023 •

edited by timneutkens

Loading

abusada commented May 11, 2023 •

edited

Loading

khuezy commented May 11, 2023 •

edited

Loading

alejandrodev-vn commented Jun 4, 2023 •

edited

Loading

Netail commented Jul 12, 2023 •

edited

Loading