layout.tsx - Returns server errors if not located in root "app" folder (Crucial)

[Galanthus]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 22.5.0: Thu Jun  8 22:22:22 PDT 2023; root:xnu-8796.121.3~7/RELEASE_X86_64
    Binaries:
      Node: 18.16.1
      npm: 9.5.1
      Yarn: 1.22.19
      pnpm: N/A
    Relevant Packages:
      next: 13.4.10
      eslint-config-next: 13.4.10
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A

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

App Router

Link to the code that reproduces this issue or a replay of the bug

https://galanthus-shiny-xylophone-97xj9r4vp639p49.github.dev/

To Reproduce

Move layout.tsx/jsx inside (website) to re-produce the error. Demo is provided with an URL.
check: https://galanthus-shiny-xylophone-97xj9r4vp639p49-3000.preview.app.github.dev/dasd (for error)
Move the layout outside to the "app" folder error is gone. Imported global styles not loading after moving the layout file to the "app" folder.

Go to random page /abc to see the server errors:

^[Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: null.
Error: Unsupported Server Component type: Null
    at attemptResolveElement (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js:1421:19)
    at resolveModelToJSON (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js:1627:41)
    at Object.toJSON (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js:1169:28)
    at stringify (<anonymous>)
    at processModelChunk (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js:2116:24)
    at retryTask (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js:1882:38)
    at performWork (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js:1920:21)
    at Timeout.eval [as _onTimeout] (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js:1429:28)
    at listOnTimeout (node:internal/timers:569:17)
    at process.processTimers (node:internal/timers:512:7) {
  digest: '135229182'
}

Describe the Bug

layout file has to be located in the root of "app" moving it inside a another path like (website), (front-end) will not work.

Expected Behavior

To work inside root, as in different route paths like it used to work in the previous version.

Which browser are you using? (if relevant)

Brave

How are you deploying your application? (if relevant)

Vercel

[huozhi]

The reproduction is 404 for me, can you update the access for that repo?

[emondpph]

Also having this error on Next 13.4.10... The layout file is inside a route group

[emondpph]

I confirm this does not happen on 13.4.9

[Galanthus]

I confirm this does not happen on 13.4.9

Thank you code friend for confirming.

[leotangram]

Hello!
It seems like the issue might be related to TurboPack. When I switch to Webpack, the error disappears. I'm using version 13.4.10 of Next.js. However, when I switch back to TurboPack next dev --turbo, the error reoccurs.

In this branch, in line 6, I have replicated the error, and in another branch, same line, I have resolved it using Webpack. Well, technically the error isn't completely resolved, but I was able to make progress on it. 😅

[Galanthus]

Hello! It seems like the issue might be related to TurboPack. When I switch to Webpack, the error disappears. I'm using version 13.4.10 of Next.js. However, when I switch back to TurboPack next dev --turbo, the error reoccurs.

In this branch, in line 6, I have replicated the error, and in another branch, same line, I have resolved it using Webpack. Well, technically the error isn't completely resolved, but I was able to make progress on it. 😅

Not using Turbopack at all just regular dev mode. Lets hope this can be reverted or fixed.

[lcnlvrz]

This error happens to me as well, but in my case occurs when i call notFound function in a route (page.tsx)

[Galanthus]

This error happens to me as well, but in my case occurs when i call notFound function in a route (page.ts)

Bingo. Thats exactly the issue if no route found NotFound() returns these errors

[fgrante]

This error happens to me as well, but in my case occurs when i call notFound function in a route (page.ts)

Same issue here. The error occurs before loading the not-found page.

[lcnlvrz]

This error happens to me as well, but in my case occurs when i call notFound function in a route (page.tsx)

I could fix my issue by creating layout.tsx inside app folder. I didn't have a root layout because i'm using next-int that requires you to have [locale] as root layout

[MichaelJohnson144]

Hello! It seems like the issue might be related to TurboPack. When I switch to Webpack, the error disappears. I'm using version 13.4.10 of Next.js. However, when I switch back to TurboPack next dev --turbo, the error reoccurs.
In this branch, in line 6, I have replicated the error, and in another branch, same line, I have resolved it using Webpack. Well, technically the error isn't completely resolved, but I was able to make progress on it. 😅

    [
      
    
        ![TurboPack](https://user-images.githubusercontent.com/32658186/253781584-4115e464-6ef4-4fa6-9e42-68d75cae8129.gif)
      ](https://user-images.githubusercontent.com/32658186/253781584-4115e464-6ef4-4fa6-9e42-68d75cae8129.gif)
    
    
      
        
          
        
        
          
          
        
      
      [
        
          
        
      ](https://user-images.githubusercontent.com/32658186/253781584-4115e464-6ef4-4fa6-9e42-68d75cae8129.gif)

Not using Turbopack at all just regular dev mode. Lets hope this can be reverted or fixed.

I can also confirm that I've been experiencing this issue after upgrading to 13.4.10 as well, except in my case, layout.tsx is at the root of my app directory.

[emmgfx]

Same.

1. 13.4.9 works well
2. Upgrading to 14.4.10 fails
3. Downgrading to 13.4.9 works again

I've been expecting this release because the not found improvements, but works worse than previous versions.

And:

This error happens to me as well, but in my case occurs when i call notFound function in a route (page.tsx)

I could fix my issue by creating layout.tsx inside app folder. I didn't have a root layout because i'm using next-int that requires you to have [locale] as root layout

I also use the [lang] folder, I can't use the layout on the root app folder. I expect that if they doesn't provide the i18n system, at least let us do this way.

[MichaelJohnson144]

Update as of 07/20/2023:

After removing --turbo from the "dev" script, routing works fine, so turbo seems to be the root issue.

[Galanthus]

Update as of 07/20/2023:

After removing --turbo from the "dev" script, routing works fine, so turbo seems to be the root issue.

not really since I don’t use turbo at all.

[MichaelJohnson144]

Update as of 07/20/2023:
After removing --turbo from the "dev" script, routing works fine, so turbo seems to be the root issue.

not really since I don’t use turbo at all.

Ah! That's right! Did you try downgrading to 13.4.9? Try doing so to verify whether or not 13.4.10's the root issue in your case.

[emmgfx]

Update as of 07/20/2023:
After removing --turbo from the "dev" script, routing works fine, so turbo seems to be the root issue.

not really since I don’t use turbo at all.

Ah! That's right! Did you try downgrading to 13.4.9? Try doing so to verify whether or not 13.4.10's the root issue in your case.

For me, yes. Was okay with .9, failed when upgraded to .10 and worked again when downgraded to .9

[emmgfx]

Same error when updating to 13.4.11 :(

[StructuralRealist]

For me it also started with 13.4.10 and I still have the error with 13.4.11.

I'm not using turbo.

Only happens for 404 routes.

I'm using i18n and my "root" layout is inside app/[lng]. This seems to be the issue. When I create a root layout in app the error is gone. But now the language is, of course, not available anymore...

[emmgfx]

Found that don't fails when triggering the 404 through a client navigation, in this case works well, but if I refresh the page the error appears again.

Also, the official example for i18n doesn't work, but I'm not sure if is caused by the same error.

[Galanthus]

So, this layout issue is not important @nextjs?

[emmgfx]

I've deployed the example on my own vercel account, and it works (here the repo), but it's a bit different from my own integration, since for the i18n system I'm hiding the default locale from the path, like:

 /route (en)
 /es/route (es)
 /de/route (de)

And in the they always redirect to the locale path, like:

 /en/route (en)
 /es/route (es)
 /de/route (de)

Also, they don't have a custom 404 page.

[Galanthus]

Latest update fixed this error but layout.tsx and not-found.tsx is not working if inside path like (website), (admin) etc.

[topovik]

v 13.4.2 - work fine
but latest version error

• error Error: Unsupported Server Component type: {...}
  at stringify ()
  null

[emmgfx]

Same error on the just released 13.4.13

[StructuralRealist]

The problem for me is that the not-found.tsx requires a root layout at app/layout.tsx. But for localization you need a root layout at app/[lng]/layout.tsx. You cannot have both because Next will merge them. I tried creating top-level route groups but that didn't work. This means that currently it's not possible to have custom 404 pages for localized Next sites... which I consider a critical bug. But as it's not fixed in the last couple of minor version I'm thinking there should be a solution I'm not aware of...

[Galanthus]

The problem for me is that the not-found.tsx requires a root layout at app/layout.tsx. But for localization you need a root layout at app/[lng]/layout.tsx. You cannot have both because Next will merge them. I tried creating top-level route groups but that didn't work. This means that currently it's not possible to have custom 404 pages for localized Next sites... which I consider a critical bug. But as it's not fixed in the last couple of minor version I'm thinking there should be a solution I'm not aware of...

Yes, but if you have a alias (website) and (admin) which requires different layout.tsx it will still not work the way it should be. Not to mention that the custom not-found.tsx is not working.

[sharifhh]

👍
It is a critical bug that breaks the whole not-found page for localized apps.

[emmgfx]

👍 It is a critical bug that breaks the whole not-found page for localized apps.

Yes @sharifhh , I'm stuck on 13.4.9 because of this. And to be honest, a bit worried because seems that nobody is caring about this issue.

[mohbalboul]

👍
Having the same issue as well, @sharifhh

[Abdelhadi92]

13.4.9

I'm facing the same issue

[Galanthus]

👍 It is a critical bug that breaks the whole not-found page for localized apps.

Not only localized apps, aliases in general (website), (admin) etc. Issue since 13.4.10

[topovik]

in v13.4.16 same issue

[huozhi]

Can someone provide a minimal reproduction as the original reproduction is 404 for me? And few folks are mentioning it's related to i18n but some are saying related to notFound. "Same issue" doesn't help for identifying the issue as we won't know how are you using with nextjs.

[github-actions]

We cannot recreate the issue with the provided information. Please add a reproduction in order for us to be able to investigate.

Why was this issue marked with the please add a complete reproduction label?

To be able to investigate, we need access to a reproduction to identify what triggered the issue. We prefer a link to a public GitHub repository (template for App Router, template for Pages Router), but you can also use these templates: CodeSandbox: App Router or CodeSandbox: Pages Router.

To make sure the issue is resolved as quickly as possible, please make sure that the reproduction is as minimal as possible. This means that you should remove unnecessary code, files, and dependencies that do not contribute to the issue. Ensure your reproduction does not depend on secrets, 3rd party registries, private dependencies, or any other data that cannot be made public. Avoid a reproduction including a whole monorepo (unless relevant to the issue). The easier it is to reproduce the issue, the quicker we can help.

Please test your reproduction against the latest version of Next.js (next@canary) to make sure your issue has not already been fixed.

If you cannot create a clean reproduction, another way you can help the maintainers' job is to pinpoint the canary version of next that introduced the issue. Check out our releases, and try to find the first canary release that introduced the issue. This will help us narrow down the scope of the issue, and possibly point to the PR/code change that introduced it. You can install a specific version of next by running npm install next@<version>.

I added a link, why was it still marked?

Ensure the link is pointing to a codebase that is accessible (e.g. not a private repository). "example.com", "n/a", "will add later", etc. are not acceptable links -- we need to see a public codebase. See the above section for accepted links.

What happens if I don't provide a sufficient minimal reproduction?

Issues with the please add a complete reproduction label that receives no meaningful activity (e.g. new comments with a reproduction link) are automatically closed and locked after 30 days.

If your issue has not been resolved in that time and it has been closed/locked, please open a new issue with the required reproduction.

I did not open this issue, but it is relevant to me, what can I do to help?

Anyone experiencing the same issue is welcome to provide a minimal reproduction following the above steps. Furthermore, you can upvote the issue using the 👍 reaction on the topmost comment (please do not comment "I have the same issue" without reproduction steps). Then, we can sort issues by votes to prioritize.

I think my reproduction is good enough, why aren't you looking into it quicker?

We look into every Next.js issue and constantly monitor open issues for new comments.

However, sometimes we might miss one or two due to the popularity/high traffic of the repository. We apologize, and kindly ask you to refrain from tagging core maintainers, as that will usually not result in increased priority.

Upvoting issues to show your interest will help us prioritize and address them as quickly as possible. That said, every issue is important to us, and if an issue gets closed by accident, we encourage you to open a new one linking to the old issue and we will look into it.

Useful Resources

• How to Contribute to Open Source (Next.js)
• How to create a Minimal, Complete, and Verifiable example
• Reporting a Next.js bug
• Next.js Triaging issues

[Abdelhadi92]

Can someone provide a minimal reproduction as the original reproduction is 404 for me? And few folks are mentioning it's related to i18n but some are saying related to notFound. "Same issue" doesn't help for identifying the issue as we won't know how are you using with nextjs.

• Create a nextjs app router project with next-intl or any i18n library
• Add root and local layouts
• Add the not-found.tsx inside the locale folder
• The not-found page is using the root layout not the local layout

you can find same issue here if you install the latest version of nextjs

[emmgfx]

I still doing some test, but looks like for me, the issue was solved in v13.4.15.

The earlier version that works for me it's v13.4.14-canary.4, although I think that my issue was solved in v13.4.14-canary.3 (but I can't install canary.3 by a dependency issue).

[huozhi]

@Abdelhadi92 I tried with the example from next-intl with latest nextjs (13.4.16) it picks up the locale layout

[Abdelhadi92]

@Abdelhadi92 I tried with the example from next-intl with latest nextjs (13.4.16) it picks up the locale layout

Thanks @huozhi

Yes, it works after upgrading next to 13.4.16.

[huozhi]

Close as there's no new updates for this issue and few folks confirmed it's fixed for them. If you still having trouble with the above error, please file a new issue with a reproduction, thanks!

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.