#The new @modal does not work.

143 messages · Page 1 of 1 (latest)

keen summit
#

In my app/page.tsx I have a <Link href="login" />.

This is supposed to be intercepted by my modal (PFA dir structure). However, due to this interception, an error is spitted out (PFA)

image.png image.png
keen summit
#

bump

twilit urchin
#

navbar.jsx?

keen summit
#

Originally I started off with JS

#

It's navbar.tsx now

twilit urchin
#

I don't know how to help you I saw this file extension I wrote it ;)

keen summit
#

bump

visual cargo
#

why would you name the directory @modal instead of modal?

#

wait. this is 13.3?

keen summit
#

yes

visual cargo
#

I didn't try it yet

#

is that a private project? @keen summit

#

I'd love to try 13.3 if you can share the codebase

keen summit
#

The one I'm having an issue in isn't mine + private

#

Sorry!

visual cargo
#

fine

keen summit
#

If you want to checkout the code I can happily share the code if you can make sense out of it haha

visual cargo
#

I don't want private one 🙂

#

@keen summit your npm version?

keen summit
visual cargo
#

what about node

keen summit
#

19.8.1

visual cargo
#

so it's more than required node version

#

i've created a brand new next app - 13.3 and it doesn't work 🤣

sturdy badger
#

I got the @ part to work at least with the latest, but can't quite figure out how to use the (..) intercept along with it, but see my parallel/intercept question help topic for what I have at least

#

my node version is 18.9.1 and next 13.3.0

keen summit
#

No clue why it doesn't work

keen summit
sturdy badger
#

#1093886831881355304

keen summit
#

Thanks

#

@sturdy badger do I have to setup where my login modal will go in the JSX? If so, how do I do this?

# 
export default function RootLayout({
  children,
  login,
}: {
  children: React.ReactNode;
  login: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className="flex flex-col">
        {login}
        <UserContextProvider>
          <Navbar />

          <section className="flex grow">{children}</section>

          <footer></footer>
        </UserContextProvider>
      </body>
    </html>
  );
}
#

This is just an example but ofc login is not a valid prop of layout

sturdy badger
#

Yeah, the layout either has to set the position of the login, or else pass it down to other things as a prop. I tested passing the tools into a container via a toolsArray on the container I wanted to do things with them.

keen summit
#

So, then how would I do this?

sturdy badger
#

I think the intention would be something like having a section in your layout above that uses {login} at the layout level. Like if your layout detects the user isn't logged in, display the {login} page instead of the {children}

keen summit
#

That's fine, but how do I get the login component in the first place?

sturdy badger
#

Oh, it just automatically detected it if there was folder named @login parellel to the layout.tsx

keen summit
#

@login? I have @modal/(..)login

sturdy badger
#

So for mine I had @tool1 and @tool2 folders with page.tsx in each and there was then a tool1 and tool2 property in layout

#

Try adding modal instead of login

keen summit
#

I tried

#

Still invalid prop

#

Wait

#

No it worked

#

Lemme check

sturdy badger
#

I didn't try the nested. I only had it page.tsx directly under @tool1 and @tool2 and then tool1 and tool2 props showed up

keen summit
#

I'm getting a 404 in my home page

#

wth

#

My code:

export default function RootLayout({
  children,
  modal,
}: {
  children: React.ReactNode;
  modal: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className="flex flex-col">
        {modal}
        <UserContextProvider>
          <Navbar />

          <section className="flex grow">{children}</section>

          <footer></footer>
        </UserContextProvider>
      </body>
    </html>
  );
}
#

no errors in console

keen summit
sturdy badger
#

I thought you had a login folder under @modal?

keen summit
keen summit
#

I thought you meant one more level deep

sturdy badger
#

nah, i meant the page.tsx for the @ thing isn't directly inside the @ thing.

keen summit
#

Right right

#

But now my home page is giving a 404

#

Even though TypeScript is happy with the modal prop

sturdy badger
#

I also realize I was testing the (..) thing wrong as I had (..login) not (..)login, so I might need to test that more later

keen summit
#

yeah

kindred pollen
#

I'm also getting 404 for nested modal + interception

keen summit
#

BTW, is this type hint even correct? modal: React.ReactNode;

sturdy badger
#

I'm not sure about the 404. I didn't run into that.

#

Yeah it's the right type I think

keen summit
#

Since @modal can have multiple intercepting folders (routes)

#

Which one goes where

#

¯_(ツ)_/¯

#

How would you differentiate

sturdy badger
#

Good question

keen summit
#

Why did the blog post/documentation not give example code

sturdy badger
#

yeah I don't know. that was irritating

keen summit
#

Indeed

sturdy badger
#

or at least they could have pushed an examples/ in github

keen summit
#

Yup

keen summit
#

But that doesn't seem right

sturdy badger
#

in any case, just for sake of testing, if you put a page.tsx directly in @modal that just returns Test and insert {modal} into your page, it should display the test piece. So it at least is a convenient way to inject parallel pages into a single layout, but may not be great for other use cases

#

ah yeah, you did it already

keen summit
keen summit
kindred pollen
keen summit
#

Besides, I just tested and clicking on an element that is wrapped in <Link href="login" /> creates an infinite loop of requests to /login

keen summit
keen summit
sturdy badger
#

I'm planning to just wait for example before digging into it too much more. It seems a bit finicky for my case unfortunately

keen summit
#

Same

keen summit
#

bump

fickle linden
#

Yeah... I too have quit trying

kindred pollen
#

hey.... I think I got it to work

#

it's not documented at all but you can find examples in their e2e tests in test/e2e/app-dir/parallel-routes-and-interception/app/intercepting-parallel-modal

#

Basically, you need to include a default.tsx file at your @page to fix the 404 error

#

export default function Page() {return null}

keen summit
kindred pollen
#

in your @<component>

keen summit
kindred pollen
#

it should be inside @modal or @products, etc

keen summit
#

Right, that fixed the issue but I still don't see the (..)login inside modal lol

kindred pollen
#

I think "modal" is a misnomer, I don't believe nextjs creates the modal for you

#

You have to style that yourself

#

at the minimal, @product gets rendered along with /product/:id. You put your main component in @product, then you render the nested /product/:id as a modal

#

in your layout.ts:

<>
   {product}
   {children}
</>
#

@product stays on the page and children is your nested route

keen summit
keen summit
keen summit
#

here's what I have rn and @modal/(..)login/page.tsx is not even invoked at all (tested using log)

image.png
keen summit
#

I do see the render of default.tsx though.

kindred pollen
#

do you have a parent group?

#

eg (groupA)/somePage/...

#

It appears if you have a group, then interception doesn't work

keen summit
keen summit
#

Buggy feature

kindred pollen
#

Maybe it doesn't work at the root? Try moving it down 1 folder

fickle linden
#

@kindred pollen -- Have you verified that it doesn't work with route groups?

This was my speculation but I haven't had time to verify. In my case my root route is in a route group, so I've got both of those issues potentially?

kindred pollen
#

Yes I created a ticket

#

You can check out the repo and try it out

#

it looks like it was addressed already

#

oh nm, it was a duplicate

keen summit
kindred pollen
#

I haven't had that issue

#

sounds OS specific?

keen summit
#

Oh wait

#

That's entirely different haha

#

My bad

fickle linden
kindred pollen
#

can you give it a thumbs up so vercel can bump priority

keen summit
#

Any updates on this?

kindred pollen
#

The final fix just got merged

#

should be in canary 7 soon/tmr

keen summit
#

That is for route groups, though, right?

#

Normal modals will work as expected too?

kindred pollen
#

I think there's a misconception of "modal". The example has "@modal" but it can be "@whatever". The ideal is that you get that component in your layout for you to style it however you want, eg a modal.

#

I could be wrong though, maybe nextjs styles it for you 🤷 . I'll try it out once .7 is released