next.js icon indicating copy to clipboard operation
next.js copied to clipboard

(..)(..) intercepting routes does not work

Open petejodo opened this issue 2 years ago • 4 comments

Link to the code that reproduces this issue

https://github.com/petejodo/two-levels-intercepting-broken

To Reproduce

  1. Start the application in development
  2. Go to route /foo/bar
  3. Click link

Current vs. Expected behavior

Following the steps, I expected the page to say intercepted fizz, instead I got fizz and a type error in the console

TypeError: Expected "1" to be a string
    at /two-levels-intercepting-broken/node_modules/next/dist/compiled/path-to-regexp/index.js:237:19
    at /two-levels-intercepting-broken/node_modules/next/dist/shared/lib/router/utils/prepare-destination.js:209:18)
    at handleRoute (/two-levels-intercepting-broken/node_modules/next/dist/server/lib/router-utils/resolve-routes.js:474:94)
    at handleRoute (/two-levels-intercepting-broken/node_modules/next/dist/server/lib/router-utils/resolve-routes.js:217:46)
    at resolveRoutes (/two-levels-intercepting-broken/node_modules/next/dist/server/lib/router-utils/resolve-routes.js:512:34)

Verify canary release

  • [X] 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.5.0: Thu Jun  8 22:22:20 PDT 2023; root:xnu-8796.121.3~7/RELEASE_ARM64_T6000
Binaries:
  Node: 18.16.1
  npm: 9.5.1
  Yarn: 1.22.19
  pnpm: 8.9.0
Relevant Packages:
  next: 13.5.6-canary.6
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

App Router

Additional context

No response

petejodo avatar Oct 18 '23 20:10 petejodo

The issue is that prepareDestination explicitly sets the single interception marker (..)(..) to args.params['0'], however path-to-regexp's lexer function produces two separate tokens for (..)(..). So when the path-to-regexp tokensToFunction's returned function gets called (which is where the type error occurs), there's two tokens:

{ name: 0, prefix: '/', suffix: '', pattern: '..', modifier: '' },
{ name: 1, prefix: '', suffix: '', pattern: '..', modifier: '' },

but the data param passed in has the interception represented as one:

{ '0': '(..)(..)' }

this leads to the type error described in the description of the issue Expected "1" to be a string because it's trying to access data[token.name] which returns undefined when token.name equals 1

petejodo avatar Oct 18 '23 20:10 petejodo

"next": "13.4.19",

I'm facing a slightly strange problem, I don't know if I'm missing something.

I have a project that is already working normally, the dynamic routes together with route interception, everything is ok. The folder structure is as follows: Captura de tela 2023-11-03 112111

link: https://portfolio-renovatt.vercel.app/views/projects Note: the route is being intercepted, the background remains the same.

But I'm trying to use hidden routes, (views), putting them in parentheses, and following the same structure, following the same pattern, route interception doesn't work correctly.

An error occurs where the original route and the intercepted route are called together.

I changed the structures a few times and found these two repositories, which I found in other issues: https://github.com/vercel/next.js/issues/49614 https://github.com/vetledv/repro-intercept/blob/main/src/app/(some-group)/%40modal/(.)photos/%5Bid%5D/page.tsx https://github.com/Apestein/nextflix/blob/main/src/app/(main)/%40modal/(.)show/%5Bid%5D/page.tsx

They are doing it like this, placing @modal inside (main), but when I do this, the route appears in the URL , however the screen is not changed, in this case my component does not appear, but if I update the page the original route happens, but just by placing (views) as the parent folder, the intercepted route happens, but with the same error as before , where the original route and the intercepted route are called together.

Captura de tela 2023-11-03 111949 Captura de tela 2023-11-03 111653

I don't understand why this happens, can anyone help me?

renovatt avatar Nov 03 '23 16:11 renovatt

I have this issue with the following case:

(mainPage)
    -> account
    -> profile 
         -> [profileId]
            -> (..)(..) account

when I remove the profile folder it works

(mainPage)
       -> account
       -> [profileId]
             -> (..) account

I am using Next 14.1.0

mlecoq avatar Jan 24 '24 19:01 mlecoq

I'm having the same issue with a similar structure, (..)(..) does not work as expected. Mine looks like:

> [locale]
>        -> event
>          -> [eventSlug]
>            -> @imageModal
>              -> (..)(..)image
>                 -> [imageSlug]
>                    -> page.tsx
>        -> image
>           -> [imageSlug]
>              -> page.tsx
> 

But works as normal if I nest image/[imageSlug] closer with (..) or (.). I've tried with canary version (14.1.1-canary.56) and still having this issue, if it's an issue and not that I'm doing something wrong. Any suggestions?

ivorhoulker avatar Feb 16 '24 15:02 ivorhoulker

I'm having the same issue and same error messages in v14.1.3 my structure is like this: image

ysl0628 avatar Mar 15 '24 05:03 ysl0628

oh no, how am i suppose to do now??

tonyabracadabra avatar Apr 30 '24 15:04 tonyabracadabra

seems the intercepting routes feature is broken.

using (...) works however.

Be careful when you have a top-level locale. then your path looks something like this: (...)[locale]/photo/[id]

macrozone avatar May 21 '24 13:05 macrozone

@petejodo Thank you for submitting an issue—taking a look!

samcx avatar Aug 12 '24 23:08 samcx

@petejodo Can confirm this is still an issue. We will be taking a look at this!

samcx avatar Aug 12 '24 23:08 samcx

The issue was marked with the good first issue label by a maintainer.

This means that it is a good candidate for someone interested in contributing to the project, but does not know where to start.

To get started, read the Contributing Guide. When you are ready, open a PR and link back to this issue in the form of adding Fixes #1234 to the PR description, where 1234 is the issue number. This will automatically close the issue when the PR gets merged, making it easier for us to keep track of what has been fixed.

Please remember to add tests to confirm your code changes will fix the issue and we do not regress in the future.

If you have any questions, feel free to ask below or on the PR. Generally, you don't need to @mention anyone directly, as we will get notified anyway and will respond as soon as we can.

[!NOTE]
There is no need to ask for permission "can I work on this?" Please, go ahead if there is no linked PR :slightly_smiling_face:

github-actions[bot] avatar Aug 12 '24 23:08 github-actions[bot]