next.js
next.js copied to clipboard
(..)(..) intercepting routes does not work
Link to the code that reproduces this issue
https://github.com/petejodo/two-levels-intercepting-broken
To Reproduce
- Start the application in development
- Go to route
/foo/bar - 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
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
"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:
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.
I don't understand why this happens, can anyone help me?
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
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?
I'm having the same issue and same error messages in v14.1.3
my structure is like this:
oh no, how am i suppose to do now??
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]
@petejodo Thank you for submitting an issue—taking a look!
@petejodo Can confirm this is still an issue. We will be taking a look at this!
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: