Missing /_not-found/page: /_not-found with app router | Next.js | Page 1

topaz osprey Oct 29, 2024, 11:42 PM

#

So I am trying to build my project with i18n internationalization and it seems to stop compiling because it can't find the _not-found.tsx. Not matter where in the app directory I put the file, it will not find it. But as soon as I put it in the pages directory (even though I am using app directory) it will complain about a conflict with some not-found file in next/dist/client/components/... . This is the same for the error routes, but these don't have conflicts in the pages directory.

lapis breachBOT Oct 29, 2024, 11:42 PM

#

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

prisma sonnet Oct 29, 2024, 11:43 PM

#

Is this your file structure @topaz osprey ?

app
|-- [lang]
    |-- page.tsx       // Main page for locale
    |-- not-found.tsx  // Not Found page for locale
    |-- error.tsx      // Error boundary for locale segment
|-- global-error.tsx   // Global error for the entire app
|-- layout.tsx         // Global layout
|-- page.tsx           // Root page

topaz osprey Oct 29, 2024, 11:45 PM

#

This is my current tree:

    _not-found.tsx (will not be found)
│   └───[locale]
│       ├───about
│       ├───blog
│       │   └───blogs
│       ├───buildattack
│       ├───dashboard
│       │   ├───post-its
│       │   └───scheduler
│       ├───help-feedback
│       ├───hooks
│       ├───login
│       ├───logout
│       ├───profile
│       ├───projects
│       ├───settings
│       ├───[...rest]
        ├───_not-found.tsx (will not be found)
        ├───providers.tsx //i18n configuration
        ├───layout.tsx //Root layout
        └───page.tsx //Root page
├───components
│   ├───blog
│   ├───cards
│   ├───dashboard
│   └───login
├───config
├───i18n
├───pages
  _error.tsx
  _not-found.tsx (will result in conflict)
└───styles

#

@prisma sonnet

prisma sonnet Oct 29, 2024, 11:48 PM

#

topaz osprey This is my current tree: ```├───app _not-found.tsx (will not be found) │ └...

you made a typo, its _not-found.tsx

#

its just not-found.tsx

#

https://nextjs.org/docs/app/api-reference/file-conventions/not-found

topaz osprey Oct 29, 2024, 11:48 PM

#

Oh yeah. that is me typing it in here

prisma sonnet Oct 29, 2024, 11:48 PM

#

not even underscore is needed before

prisma sonnet Oct 29, 2024, 11:48 PM

#

topaz osprey Oh yeah. that is me typing it in here

remove underscore

topaz osprey Oct 29, 2024, 11:48 PM

#

The file in my IDE is correctly spelled but my tree doesn't show files

prisma sonnet Oct 29, 2024, 11:48 PM

#

before

topaz osprey Oct 29, 2024, 11:49 PM

#

okay one sec removing underscore

#

Removing _ outside of the [locale] will result in this (If I add the layout it will get treated as a normal page and it will return to the old error.

Having not-found.tsx in my [locale] folder, it will go back to showing this error on build:

        /_not-found/page: /_not-found

#

I had the same issue with error.tsx and the only way to make it work is to add it into the pages directory

prisma sonnet Oct 29, 2024, 11:52 PM

#

remove not-found.tsx from app folder, and put it inside locale only

topaz osprey Oct 29, 2024, 11:52 PM

#

I can't add the _not-found.tsx there though, because I run into a conflict

topaz osprey Oct 29, 2024, 11:52 PM

#

prisma sonnet remove `not-found.tsx` from `app` folder, and put it inside locale only

it is

prisma sonnet Oct 29, 2024, 11:53 PM

#

topaz osprey This is my current tree: ```├───app _not-found.tsx (will not be found) │ └...

In this structure, your _not-found.tsx is inside app folder. put it inside [locale] folder.

prisma sonnet Oct 29, 2024, 11:54 PM

#

topaz osprey Removing _ outside of the [locale] will result in this (If I add the layout it w...

this is what this err is indicating

topaz osprey Oct 29, 2024, 11:55 PM

#

This is my current tree:

│   └───[locale]
│       ├───about
│       ├───blog
│       │   └───blogs
│       ├───buildattack
│       ├───dashboard
│       │   ├───post-its
│       │   └───scheduler
│       ├───help-feedback
│       ├───hooks
│       ├───login
│       ├───logout
│       ├───profile
│       ├───projects
│       ├───settings
│       ├───[...rest]
        ├───not-found.tsx (will not be found)
        ├───providers.tsx //i18n configuration
        ├───layout.tsx //Root layout
        └───page.tsx //Root page
├───components
│   ├───blog
│   ├───cards
│   ├───dashboard
│   └───login
├───config
├───i18n
├───pages
  _error.tsx
└───styles

This is the layout now. The not-found.tsx is inside [locale] and it is not being found. I get > Export encountered errors on following paths: /_not-found/page: /_not-found
If I put the _ infront, same thing

prisma sonnet Oct 29, 2024, 11:56 PM

#

whats your nextjs version?

topaz osprey Oct 29, 2024, 11:57 PM

#

prisma sonnet whats your nextjs version?

14.2.5

prisma sonnet Oct 30, 2024, 12:00 AM

#

can you send your not-found.tsx file?

topaz osprey Oct 30, 2024, 12:00 AM

#

export const dynamic = "force-dynamic";
import { redirect } from "next/navigation";

export default function _notFound() {
  redirect("/");
  return <div></div>;
}

#

Should I try and use NotFound() as the function to export?

prisma sonnet Oct 30, 2024, 12:03 AM

#

topaz osprey ```js export const dynamic = "force-dynamic"; import { redirect } from "next/nav...

Yup, its happening because not-found.tsx is not expecting to redirect.

#

Can you try removing redirect first

topaz osprey Oct 30, 2024, 12:04 AM

#

prisma sonnet Yup, its happening because `not-found.tsx` is not expecting to redirect.

The file is in the pages directory currently. Or do you want me to put it back into [locale]?

prisma sonnet Oct 30, 2024, 12:05 AM

#

Yes

#

#

Ai genereted answer, could be wrong

prisma sonnet Oct 30, 2024, 12:07 AM

#

topaz osprey The file is in the pages directory currently. Or do you want me to put it back i...

put back into locale, and remove redirect

topaz osprey Oct 30, 2024, 12:07 AM

#

prisma sonnet Ai genereted answer, could be wrong

ye I already consoulted them too I tried almost everything from the docs

#

lol

#

Okay

#

so

prisma sonnet Oct 30, 2024, 12:08 AM

#

is it working/

topaz osprey Oct 30, 2024, 12:09 AM

#

neither this

export const dynamic = "force-dynamic";
import { redirect } from "next/navigation";

export default function NotFound() {
  return <div></div>;
}

nor the same with _notFound() works

#

So as far as I can tell is, that it is trying to find not-found.tsx in the pages directory

#

which shouldn't be a thing since I am using app directory

prisma sonnet Oct 30, 2024, 12:09 AM

#

topaz osprey neither this ```js export const dynamic = "force-dynamic"; import { redirect } f...

Can you try commenting export const dynamic?

And in div, just add not found

topaz osprey Oct 30, 2024, 12:09 AM

#

The same happened to error.tsx but that one doesn't conflict

topaz osprey Oct 30, 2024, 12:10 AM

#

prisma sonnet Can you try commenting export const dynamic? And in div, just add `not found`

I think export const dynamic is already there... But i will add the text

#

Ye still not finding the file

prisma sonnet Oct 30, 2024, 12:11 AM

#

commenting*

topaz osprey Oct 30, 2024, 12:11 AM

#

Here is the full error:

📎 message.txt

#

Error if I put it in the pages folder (with _ notation):

 ⨯   "pages/_not-found.tsx" - "next/dist/client/components/not-found-error"

#

Also commenting doesn't change it

prisma sonnet Oct 30, 2024, 12:14 AM

#

For now, just don't even use pages dir

#

delete pages dir completely, it won't help at all

#

And can you send your layout file?

topaz osprey Oct 30, 2024, 12:16 AM

#

This will add two new problems;

> Export encountered errors on following paths:
        /_error: /404
        /_error: /500
        /_not-found/page: /_not-found

because the pages directory contained the _error.tsx (I have a seperate error.tsx in the app directory under [locale] but same as with the not-found it will not get registered.

topaz osprey Oct 30, 2024, 12:16 AM

#

prisma sonnet And can you send your layout file?

Top layout.tsx:

import "@/src/styles/globals.css";
import { Metadata, Viewport } from "next";
import { Link } from "@nextui-org/link";
import clsx from "clsx";

import { Providers } from "./providers";

import { siteConfig } from "@/src/config/site";
import { fontSans } from "@/src/config/fonts";
import { Navbar } from "@/src/components/navbar";


import { config } from '@fortawesome/fontawesome-svg-core'
import '@fortawesome/fontawesome-svg-core/styles.css'
import { getMessages } from "next-intl/server";
import { NextIntlClientProvider } from "next-intl";
config.autoAddCss = false

export const metadata: Metadata = {
  title: {
    default: siteConfig.name,
    template: `%s - ${siteConfig.name}`,
  },
  description: siteConfig.description,
  icons: {
    icon: "/favicon.ico",
  },
};

export const viewport: Viewport = {
  themeColor: [
    { media: "(prefers-color-scheme: light)", color: "white" },
    { media: "(prefers-color-scheme: dark)", color: "black" },
  ],
};

export default async function RootLayout({
  children,
  params: {locale}
}: {
  children: React.ReactNode;
  params: {locale: string}
}) {
  const messages = await getMessages();
  return (
    <html suppressHydrationWarning lang={locale}>
      <body
        className={clsx(
          "min-h-screen bg-background font-sans antialiased",
          fontSans.variable,
        )}
      >
        <Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
          <NextIntlClientProvider messages={messages}>
            <div className="relative flex flex-col h-fit bg-main light:bg-light overflow-x-hidden scrollbar-hide">
              <Navbar />
              <main className="container mx-auto max-w-fit flex-grow h-fit z-0 scrollbar-hide">
                {children}
              </main>
            </div>
          </NextIntlClientProvider>
        </Providers>
      </body>
    </html>
  );
}

prisma sonnet Oct 30, 2024, 12:18 AM

#

Just for testing, can you comment the next intl and provders part & check if it is working?

topaz osprey Oct 30, 2024, 12:18 AM

#


import "@/src/styles/globals.css";
import { Metadata, Viewport } from "next";
import { Link } from "@nextui-org/link";
import clsx from "clsx";

import { Providers } from "./providers";

import { siteConfig } from "@/src/config/site";
import { fontSans } from "@/src/config/fonts";
import { Navbar } from "@/src/components/navbar";


import { config } from '@fortawesome/fontawesome-svg-core'
import '@fortawesome/fontawesome-svg-core/styles.css'
import { getMessages } from "next-intl/server";
import { NextIntlClientProvider } from "next-intl";
config.autoAddCss = false

export const metadata: Metadata = {
  title: {
    default: siteConfig.name,
    template: `%s - ${siteConfig.name}`,
  },
  description: siteConfig.description,
  icons: {
    icon: "/favicon.ico",
  },
};

export const viewport: Viewport = {
  themeColor: [
    { media: "(prefers-color-scheme: light)", color: "white" },
    { media: "(prefers-color-scheme: dark)", color: "black" },
  ],
};

export default async function RootLayout({
  children,
  params: {locale}
}: {
  children: React.ReactNode;
  params: {locale: string}
}) {
  const messages = await getMessages();
  return (
    <html suppressHydrationWarning lang={locale}>
      <body
        className={clsx(
          "min-h-screen bg-background font-sans antialiased",
          fontSans.variable,
        )}
      >
        <Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
        
            <div className="relative flex flex-col h-fit bg-main light:bg-light overflow-x-hidden scrollbar-hide">
              <Navbar />
              <main className="container mx-auto max-w-fit flex-grow h-fit z-0 scrollbar-hide">
                {children}
              </main>
            </div>
         
        </Providers>
      </body>
    </html>
  );
}

So like this?

prisma sonnet Oct 30, 2024, 12:20 AM

#

Also providers

topaz osprey Oct 30, 2024, 12:20 AM

#

That's NextJS

#

But wait lemme test

#

Nope

#

doesn't change anything

prisma sonnet Oct 30, 2024, 12:22 AM

#

Can you provide a min repro repo? I'll check it when I'm free

topaz osprey Oct 30, 2024, 12:22 AM

#

prisma sonnet Can you provide a min repro repo? I'll check it when I'm free

A what? 😅

prisma sonnet Oct 30, 2024, 12:22 AM

#

Minimum Reproduction repository

topaz osprey Oct 30, 2024, 12:22 AM

#

oh

prisma sonnet Oct 30, 2024, 12:23 AM

#

https://nextjs-faq.com/minimal-reproduction-repository

topaz osprey Oct 30, 2024, 12:23 AM

#

ye I can try

prisma sonnet Oct 30, 2024, 12:23 AM

#

I'll check it out when I'm free

topaz osprey Oct 30, 2024, 12:24 AM

#

Okay, I might want to go to sleep anyway lol

prisma sonnet Oct 30, 2024, 12:24 AM

#

Same

topaz osprey Oct 30, 2024, 12:48 AM

#

prisma sonnet Minimum Reproduction repository

https://github.com/Tund101HD/minRepoLuciDev
This should be a working min repro repo. Added "FIXME" tags to the corresponding files that are of interest

GitHub

GitHub - Tund101HD/minRepoLuciDev

Contribute to Tund101HD/minRepoLuciDev development by creating an account on GitHub.

#

TLDR for anyone else joining;

I am using app directory for my NextJS + i18n routing project. When I try and build it, it will show this error:

> Export encountered errors on following paths:
        /_error: /404
        /_error: /500
        /_not-found/page: /_not-found

This shouldn't happen, as it is defined:
This is my current tree:

│   └───[locale]
│       ├───[...rest]
        ├───not-found.tsx (will not be found)
        ├───error.tsx (will not be found)
        ├───providers.tsx //NextJS Provider
        ├───layout.tsx //Root layout
        └───page.tsx //Root page
├───config
├───i18n
└───styles

If I put the error.tsx into the pages directory, the missing paths for the error go away:

│   └───[locale]
│       ├───[...rest]
        ├───not-found.tsx (will not be found)
        ├───error.tsx (Does not matter if this is here or not)
        ├───providers.tsx //NextJS provider
        ├───layout.tsx //Root layout
        └───page.tsx //Root page
├───config
├───pages
    _error.tsx (This is being found and will resolve the error)
├───i18n
└───styles

After this change, the build error is reduced to

> Export encountered errors on following paths:
        /_not-found/page: /_not-found

#

If I now try and put the _not-found.tsx into the pages directory, to resolve it the same way as _error.tsx, I get a conflict error while building;

│   └───[locale]
│       ├───[...rest]
        ├───not-found.tsx (will not be found)
        ├───error.tsx (Does not matter if this is here or not)
        ├───providers.tsx //NextJS provider
        ├───layout.tsx //Root layout
        └───page.tsx //Root page
├───config
├───pages
    _error.tsx (This is being found and will resolve the error)
    _not-found.tsx (This will produce the conflict)
├───i18n
└───styles

 ⨯   "pages/_not-found.tsx" - "next/dist/client/components/not-found-error"

It does not matter, how the code in the not-found is shaped, I get either a conflict or it not being found all the time.

#

Now on to some important files;
app/[locale]/layout.tsx (The main layout file)


import "@/src/styles/globals.css";
import { Metadata, Viewport } from "next";
import { Link } from "@nextui-org/link";
import clsx from "clsx";

import { Providers } from "./providers";

import { siteConfig } from "@/src/config/site";
import { fontSans } from "@/src/config/fonts";
import { Navbar } from "@/src/components/navbar";


import { config } from '@fortawesome/fontawesome-svg-core'
import '@fortawesome/fontawesome-svg-core/styles.css'
import { getMessages } from "next-intl/server";
import { NextIntlClientProvider } from "next-intl";
config.autoAddCss = false

export const metadata: Metadata = {
  title: {
    default: siteConfig.name,
    template: `%s - ${siteConfig.name}`,
  },
  description: siteConfig.description,
  icons: {
    icon: "/favicon.ico",
  },
};

export const viewport: Viewport = {
  themeColor: [
    { media: "(prefers-color-scheme: light)", color: "white" },
    { media: "(prefers-color-scheme: dark)", color: "black" },
  ],
};

export default async function RootLayout({
  children,
  params: {locale}
}: {
  children: React.ReactNode;
  params: {locale: string}
}) {
  const messages = await getMessages();
  return (
    <html suppressHydrationWarning lang={locale}>
      <body
        className={clsx(
          "min-h-screen bg-background font-sans antialiased",
          fontSans.variable,
        )}
      >
        <Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
          <NextIntlClientProvider messages={messages}>
            <div className="relative flex flex-col h-fit bg-main light:bg-light overflow-x-hidden scrollbar-hide">
              <Navbar />
              <main className="container mx-auto max-w-fit flex-grow h-fit z-0 scrollbar-hide">
                {children}
              </main>
            </div>
          </NextIntlClientProvider>
        </Providers>
      </body>
    </html>
  );
}

#

root/next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {}
const createNextIntlPlugin = require('next-intl/plugin');
const withNextIntl = createNextIntlPlugin();

const { webpack } = require("next/dist/compiled/webpack/webpack");
require('dotenv').config();
module.exports = withNextIntl({
  experimental: {
    missingSuspenseWithCSRBailout: false,
    turbo: {
      rules: {
        '*.svg': {
          loaders: ['@svgr/webpack', 'esbuild-loader'],
          as: '*.js',
        },
      },
    },
  },
  webpack: (config) => {
    config.plugins = config.plugins || [];
    config.plugins.push(
      new webpack.NormalModuleReplacementPlugin(/node:/, (resource) => {
        resource.request = resource.request.replace(/^node:/, "");
      }),
    );
    config.externals = {
      'next-intl': 'commonjs next-intl'
    }

    config.resolve.fallback = {
      ...config.resolve.fallback,async_hooks: false,
    }
    return config;
  },
});

#

Now normally I expect the error.tsx and the not-found.tsx in [locale] to be found. Putting them into the app/ directory will make them normal pages and I need to add a layout, after which they are not found still.

NextJS version: 14.2.5

What I might try when I wake up is;

Do I need getStaticProps in the error.tsx and not-found.tsx, in order them to be rendered as static pages?
Try to resolve the conflict somehow.

If anyone could point me in the right direction, that would be appreciated very much!

prisma sonnet Oct 30, 2024, 7:17 AM

#

Thanks, checking it out

prisma sonnet Oct 30, 2024, 7:53 AM

#

I have identified what the issue is.

So You'll need 2 not-found.tsx, one inside /app.

Since one is inside /app, a separate layout.tsx will be needed for that also

topaz osprey Oct 30, 2024, 10:10 AM

#

prisma sonnet I have identified what the issue is. So You'll need 2 not-found.tsx, one inside...

So can you send a layout of what to do?

prisma sonnet Oct 30, 2024, 10:24 AM

#

I'll create a PR

#

@topaz osprey So after this, I saw the issue was still there.

The issue is with webpack config. If I comment it, build is running fine

#

-# app/not-found.tsx

'use client';
 
import Error from 'next/error';
import { redirect } from 'next/navigation';
 
export default function NotFound() {
  // redirect('/'); // Add this(if needed) after commenting use client and the return statement
  return ( 
    <html lang="en">
      <body>
        <Error statusCode={404} />
      </body>
    </html>
  );
}

-# app/layout.tsx

import React from "react";


export default async function RootLayout({ children } : { children: React.ReactNode}) {
    return (
        <>
        {children}
        </>
    )
}

Copy same error.tsx in app/ folder from app/[locale]

app/[locale]/not-found.tsx remains same

Comment WebPack config(to be fixed)

topaz osprey Oct 30, 2024, 11:36 AM

#

prisma sonnet I'll create a PR

Okay

topaz osprey Oct 30, 2024, 11:39 AM

#

prisma sonnet -# app/not-found.tsx ```ts 'use client'; import Error from 'next/error'; impor...

What exactly do you mean by "comment WebPack config"?

#

Nevermind I think I know what you mean, just tested it

#

Let me test on the full site to see if commenting webpack config is breaking

#

Solution builds on Vercel as well as on my machine, so change is not breaking. Thanks @prisma sonnet for your help and time, really appreciate it!
Marking the above answer as solution, the webpack config was an old fix and I suspect the fallback to have been the problem.

#Missing /_not-found/page: /_not-found with app router