return notFound() doesn't work in parallel routing

[pavelbuchta]

I'm using next.js 14 with app router. This is my dynamic/paralel routing folder structure.

│   └───admin
│       ├───form
│       │   ├───@form
│       │   │   ├───create
│       │   │   ├───[id]
│       │   │   │   └───update
│       │   │   └───_components
│       │   ├───@table
│       │   │   ├───_components
│       │   │   └───_data
│       │   ├───create
│       │   └───[id]
│       │       └───update
│       ├───user

This is my /form/[id]/update/page.tsx

 import { Locale } from "@/i18n-config";
  import { getFormById } from "@/lib/form";
  import { getDictionary } from "@/lib/get-dictionary";
  import { notFound } from "next/navigation";
  import AdminHeader from "../../../_components/admin-header";

  export default async function DiscoveryFormsPageCreate({
    params,
  }: {
    params: { lang: Locale; id: string };
  }) {
    const dict = (await getDictionary(params.lang)).admin.form.update;
    const form = await getFormById(params.id);

    if (!form) {
      return notFound();
    }

    return (
      <AdminHeader headline={dict.headline} subheadline={dict.subheadline} />
    );
  }

It all works as expected, but when i input an id that doesn't exist, it returns this error:

Unhandled Runtime Error
NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

But I think it has nothing to do with the /form/@form/[id]/update/page.tsx that has this code:

import { Locale } from "@/i18n-config";
import { getFormById } from "@/lib/form";
import { getDictionary } from "@/lib/get-dictionary";
import { getAllUsers } from "@/lib/user";
import FormForm from "../../_components/form";

export default async function DiscoveryFormsPageCreate({
  params,
}: {
  params: { lang: Locale; id: string };
}) {
  const dict = (await getDictionary(params.lang)).admin.form.update;
  const form = await getFormById(params.id);
  const users = (await getAllUsers()).map((item) => ({
    id: item.id,
    email: item.email,
  }));

  if (!form) {
    return null;
  }

  return (
    <main className="flex flex-col items-start gap-4 p-4 md:gap-8 lg:p-10">
      <FormForm
        type="update"
        id={params.id}
        formObject={form}
        dict={dict}
        users={users}
      />
    </main>
  );
}

[versecafe]

@pavelbuchta Try calling it as notFound() instead of returning, it

import { Locale } from "@/i18n-config";
import { getFormById } from "@/lib/form";
import { getDictionary } from "@/lib/get-dictionary";
import { notFound } from "next/navigation";
import AdminHeader from "../../../_components/admin-header";

export default async function DiscoveryFormsPageCreate({
  params,
}: {
  params: { lang: Locale; id: string };
}) {
  const dict = (await getDictionary(params.lang)).admin.form.update;
  const form = await getFormById(params.id);

  if (!form) {
    notFound();
  }

  return (
    <AdminHeader headline={dict.headline} subheadline={dict.subheadline} />
  );
}

[pavelbuchta]

This did not resolve the issue.

[pavelbuchta]

I found the solution. I haven't configured a not-found.tsx page. Creating a not-found page solved the problem.