#Unhandled runtime error

9 messages · Page 1 of 1 (latest)

solemn fjord
#

I've been playing around with the new app directory. I have a simple page.js file inside the root of the app directory and have slightly tweaked the layout.js file that has been generated, which has resulted in problems. Yesterday the site would work but render elements in the wrong order, but now it displays the error that I have attached (Fig. 1).
Fig. 2 is my file tree.

Here is page.js:

export default function Home() {
    return (
        <>
            <p>Hello, world!</p>
        </>
    )
}```
Here is layout.js:

```js
/* eslint-disable @next/next/no-head-element */

export default function RootLayout({ children }) {
  return (
    <html>
      <head></head>
      <p>test</p>
      <body>{children}</body>
    </html>
  );
}

Here is next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  experimental:{appDir: true}
}

module.exports = nextConfig

Here is package.json:

{
  "name": "projectnamehere",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbo",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "13.0.3",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "eslint": "8.27.0",
    "eslint-config-next": "13.0.3"
  }
}

Any help would be appreciated. Thanks!

image.png image.png
solemn fjord
#

Update: Removing the <head> tags fixed the error, but now its displaying in the wrong way.

idle night
#

how abt this? invalid html may cause hydration errors.

<html>
      <head></head>
      <body>{children}</body>
</html>
solemn fjord
idle night
#

u mean like this?

return (
        <html lang="en">
        <head>
            <title>Next.js 13</title>
            <meta name="description" content="Generated by create next app"/>
            <link rel="icon" href="/favicon.ico"/>
        </head>
        <body>
            <div>
                <div>
                    Hello
                </div>
                <div>
                    {children}
                </div>
            </div>
        </body>
        </html>
    )

this works in my local mac

solemn fjord
idle night
#

as i said, html should be valid. for instance, div inside p won't work.

solemn fjord
#

thats probably why it broke

#

Thanks for your help!