Styles Missing in Intercepted/Parallel Routes After Updating to Next 13.4

[keegandonley]

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.3.0: Mon Jan 30 20:39:35 PST 2023; root:xnu-8792.81.3~2/RELEASE_ARM64_T8103
    Binaries:
      Node: 16.14.0
      npm: 8.3.1
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.4.1-canary.0
      eslint-config-next: 13.4.0
      react: 18.2.0
      react-dom: 18.2.0

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

App directory (appDir: true), Routing (next/router, next/navigation, next/link)

Link to the code that reproduces this issue

https://github.com/keegandonley/keegan.codes/tree/route-bug

To Reproduce

Clicking on a blog post is supposed to open a modal using parallel + intercepted routes. Clicking on any blog post either from my home page (/) or blog page (/blog) loads the modal without styles, breaking the layout severely.

Describe the Bug

The styles that are associated with my intercepted + parallel route are missing. I can see the classes applied, but there are no associated stylesheets.

You can see the missing styles easily by comparing the version running on 13.3.4 at https://keegan.codes and the version running on 13.4.1-canary.0 at https://keegancodes-git-route-bug-k10y-team.vercel.app/

Expected Behavior:

Actual Behavior:

Expected Styles:

Actual Styles:

Expected Behavior

The stylesheets should be applied

Which browser are you using? (if relevant)

Brave Version 1.50.114 Chromium: 112.0.5615.49 (Official Build) (arm64)

How are you deploying your application? (if relevant)

Vercel

[keegandonley]

Any updates on this? I'm effectively stuck on 13.3.4 which has plenty of other critical bugs causing me problems. I really need to be able to update to the stable version but this is a major blocker with no workaround I'm aware of.

[keegandonley]

Confirmed this is still broken on the latest canary

[keegandonley]

Still present in the latest canary 😐

Would appreciate a response here as I've now had development halted for over 2 weeks on this project

[keegandonley]

Still broken in the latest canary

[ThomasMcFarlane]

Hit hit this issue only when putting a style (or a component that includes a style) into the layout.tsx I am able to work around it by moving the style into the page, or into a template.tsx instead.

[keegandonley]

Hit hit this issue only when putting a style (or a component that includes a style) into the layout.tsx

I am able to work around it by moving the style into the page, or into a template.tsx instead.

@ThomasMcFarlane disappointingly, my issue presents even when using styles (or components) directly in the page. My styles in loading.tsx do work correctly though.

[keegandonley]

This appears to be specifically related to having a loading.tsx. Removing that file from the intercepted route solves my issue though I do need to put that loading state back.

[ThomasMcFarlane]

Can confirm. I only have a loading.tsx in the root of the app folder but removing it fixes issues with the layout.tsx styles.

Having loading.tsx anywhere in the app structure breaks styling. Even if it is a path unrelated to the interceptor/intercepted route.

[samcx]

@keegandonley The branch is currently a 404. Can you confirm if you are still experiencing this issue with the latest canary? We have shipped a lot of Parallel routes fixes recently!

[keegandonley]

@samcx I had to implement a workaround for this quite a long time ago to get released on time so I don't have my reproduction still up and my codebase has evolved a lot since then. I'll see if I can get back to the state that was broken and verify if it's working or not.

[haggen]

Still got the problem on Next.js v14.1.0. I managed to get the styles of the parallel route working by using a template instead of a layout, as per @ThomasMcFarlane advice. But now the style from the main page of the route is missing, even though the layout doesn't import any of it.

My scenario is; I have a listing page at / with a layout and a page. Parallel to it I have a @modal/new route with the new record form. The idea is to have the listing page open the form inside a modal, and even if we visit the form directly it should render the listing behind it.

Navigation is working, but the style of the listing page isn't loaded when I visit the form directly.

Edit: Oh I think I understand the issue. Since I wanted the listing to always render behind the form in a modal I'm re-exporting the page component from the default.tsx file. But since the components are imported in the page.tsx file Next.js asset graph probably can't include them in the bundle.

Edit 2: Next.js v14.1.2-canary.1 fixed the issue.

[ADTC]

I discovered that something like this happens in Localhost (npm run dev):

https://github.com/vercel/next.js/assets/6047296/fdc508ac-a3ef-4a97-b8d4-0adf8c14b2d8

But it doesn't happen in a Vercel prod deployment:

https://github.com/vercel/next.js/assets/6047296/07cf6280-6ab2-4615-baa4-9271115f639d

My reproduction repo (feel free to clone/fork; ⭐️ stars are appreciated!): https://github.com/ADTC/nextjs-app-router-intercepting-parallel-route-parent-css-missing-demo

Remember to test in localhost, as you can't reproduce the problem in Vercel deployments. (Your port might be 3000, I just had something running in 3000 already, so I got 3001 instead.)

Note that the login-fixed route is how I fixed the problem in localhost. But fixing the problem is not necessary since the problem doesn't happen in Vercel deployment.

Just remember to tell your team members that it's a local dev run problem only.

[samcx]

@ADTC I was no able to reproduce this on the latest canary—can you also verify this is the case (and that I have reproduce the steps correctly)?

https://github.com/vercel/next.js/assets/28912696/43a153d5-b24e-4ebc-ab45-036690e9abbc

This issue was via these two s →

• https://github.com/vercel/next.js/pull/66300
• https://github.com/vercel/next.js/pull/67436