I have a Next.js application with a parallel intercepted route. I am catching a certain route and rendering a modal over the current route.
When deployed to Vercel there is an issue when opening that route. The code is working perfectly fine locally in both, development and production mode.
Here is the error I am getting: Application error: a client-side exception has occurred (see the browser console for more information).
I found out that on Vercel deployment the page param for the [collection] path gets logged as %5Bcollection%5D inside the modal, which is most likely causing the error. [collection] is the folder name, it should be logging the appropriate part of the path from the URL and not the literal folder name.
If anything else is needed from my side, I will gladly help. Hopefully, I was clear enough.
Thanks for sharing the repo, @cuso! It looks like there’s a typo in the modal path. If you change (..)[collection] with two dots to (.)[collection] with only one dot, that should get it working. I was able to deploy an example that doesn’t get the error by changing only that segment.
I recommend reviewing the Modals section of the Next.js Parallel Routes documentation for the specifics.
There is no typo in the modal path. The two dots notation (..) are used to match segments one level above, see the docs for convention.
With one dot the behavior will not be the same. The example I shared works well and as expected when it’s built for production locally, while on Vercel it won’t work the same way and it will throw an error, as explained previously.
You’re right, I made a mistake with my initial test. My example didn’t have the error, but it also didn’t actually have the modal.
I took a more careful look this time. The console shows HierarchyRequestError: Failed to execute 'appendChild' on 'Node': Only one element on document allowed which seems to be caused by the directory structure. The intercepting route sits inside the route it intercepts. It works when I change the path from (..)[collection]/[item] to (.)[item]
The intercepting route sits inside the route it intercepts. It works when I change the path from (..)[collection]/[item] to (.)[item]
This works and it will help me with my issue!
However, I still think the previous approach shouldn’t be a problem to build using Vercel if it works well on its own, you guys should file this as a bug.
Thank you for your help @amyegan, it was invaluable!
