So for my "transactions", if my database doesn't recall an ID, i prompt a noteFound()export default async function TransactionDisplayPage({ params }) { let data = await fetchID(params.id); if (data === null) { // no transaction found notFound(); // return ( 404 ) } ...Here is my not-found.js:import Link from 'next/link' export default function NotFound() { return ( 404 Not Found! | Go Back Home ); }when I go to a random url, I get these warnings:app-index.js:35 Warning: validateDOMNesting(...): cannot appear as a child of . at html---Warning: You are mounting a new html component when a previous one has not first unmounted. It is an error to render more than one html component at a time and attributes and children of these components will likely fail in unpredictable ways. Please only render a single instance of and if you need to mount a new one, ensure any previous ones have unmounted first.---and same with new head and new body comp

not-found.js returning some warnings

Answered

Elite posted this in #help-forum

2024-03-23T04:45:50.000Z

So for my "transactions", if my database doesn't recall an ID, i prompt a noteFound()

export default async function TransactionDisplayPage({ params }) {
    let data = await fetchID(params.id);

    if (data === null) { // no transaction found
        notFound();
        // return (<h1>404</h1>)
    }
...

Here is my not-found.js:

import Link from 'next/link'
 
export default function NotFound() {
    return (
        <div style={{
            position: 'absolute',
            left: '50%',
            top: '50%',
            transform: 'translate(-50%, -50%)',
            color: 'red'
        }}>
            <h1>404 Not Found! | <Link href="/" style={{color: 'red', textDecoration: 'underline'}}><strong>Go Back Home</strong></Link></h1> 
        </div>
      );
}

when I go to a random url, I get these warnings:

app-index.js:35 Warning: validateDOMNesting(...): <html> cannot appear as a child of <body>.
    at html

---

Warning: You are mounting a new html component when a previous one has not first unmounted. It is an error to render more than one html component at a time and attributes and children of these components will likely fail in unpredictable ways. Please only render a single instance of <html> and if you need to mount a new one, ensure any previous ones have unmounted first.

---
and same with new head and new body comp

Answered by Arinji

you cant have 2 html tags

View full answer

71 Replies

Arinji

2024-03-23T04:47:57.000Z

show your nearest layout.tsx please

wait are you on vscode?

@Elite

@Arinji wait are you on vscode?

EliteOP

2024-03-23T04:57:58.000Z

yes

@Arinji show your nearest layout.tsx please

EliteOP

2024-03-23T04:58:12.000Z

// import Navbar from '@components/General/navbar.jsx';
// import Footer from '@components/General/Footer.jsx';
export const metadata = {
  title: 'PayBridge Technologies - Transaction'
}

export default function TransactionLayout({ children }) {
  return (
    <html lang="en">
      <head/>
        <body>
          {/* <Navbar/> */}
          {children}
          {/* <Footer/> */}
        </body>
    </html>
  )
}

in the route

@Elite yes

Arinji

2024-03-23T04:58:14.000Z

ok do a vscode search for <html> and show the results

EliteOP

2024-03-23T04:58:25.000Z

Arinji

2024-03-23T04:58:34.000Z

you cant have 2 html tags

Answer

Arinji

2024-03-23T04:58:43.000Z

cause the layout.js is ALWAYS going to be on the site

EliteOP

2024-03-23T04:58:49.000Z

so should i remove them in the internal layout

Arinji

2024-03-23T04:58:52.000Z

having another layout with html will make the page have 2

EliteOP

2024-03-23T04:58:55.000Z

like the route layout

@Elite so should i remove them in the internal layout

Arinji

2024-03-23T04:58:56.000Z

yes.

EliteOP

2024-03-23T04:58:59.000Z

alr

export default function TransactionDataLayout({ children }) {
    return (
        <head/>
        <body>
          {children}
        </body>
    )
}

what should i do to this

Arinji

2024-03-23T04:59:23.000Z

jsx

EliteOP

2024-03-23T04:59:24.000Z

its redlined

Arinji

2024-03-23T04:59:33.000Z

your file extensions need to be jsx

not js

EliteOP

2024-03-23T04:59:50.000Z

even for error and notfound?

Arinji

2024-03-23T05:00:00.000Z

all react components :D

EliteOP

2024-03-23T05:00:02.000Z

bascially everything but backend

alr

Arinji

2024-03-23T05:00:06.000Z

js dosent have html tags

jsx has html tags

EliteOP

2024-03-23T05:00:45.000Z

still red

@Elite still red

Arinji

2024-03-23T05:01:28.000Z

show your entire file

EliteOP

2024-03-23T05:02:11.000Z

all my layouts are red except the root

Arinji

2024-03-23T05:02:25.000Z

i mean the file, not fileStructure

EliteOP

2024-03-23T05:02:37.000Z

export const metadata = {
  title: 'Application'
}
export default function ApplicationLayout({ children }) {
  return (
      <head/>
        <body>
          {children}
        </body>
  )
}