Runtime Error Cannot read properties of undefined (reading 'call') when migrating from next12 to next13

Question

npx create-next-app

After that I added the support of app directory by adding

experimental : {
   appDir : true,
}

Finally, I got rid of the pages folder and created the app folder with the following structure:

-app
--page.tsx
--layout.tsx
--head.tsx

Contents of the newly created files:

layout.tsx

import Footer from "../ui/Footer";
import Header from "../ui/Header";
import '../styles/globals.css';

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body className="font-sans bg-gradient-to-b from-neutral-900 to-indigo-900">
        <Header />
        <main className="min-h-screen flex justify-center items-center flex-1 ">
          {children}
        </main>
        <Footer />
      </body>
    </html>
  );
}

page.tsx

import Card from "../ui/Card";

export default function Page() {
  return (
      <div className="flex items-center justify-center flex-wrap  large:max-w-2xl medium:max-w-md">
        <Card
          title="JWT"
          logo=""
          desc="Industry standard method for secure claim representation."
        />
      </div>
  );
}

head.tsx

export default function Head() {
  return (
    <>
      <title>Authenticator</title>
      <meta
        name="description"  
        content="A playground to explore different types of authentication/authorization
            using different services in educational purposes."
        key="description"
      />
        <link rel="icon" href="/favicon.ico" />
      <meta name="viewport" content="initial-scale=1.0, width=device-width" />
    </>
  );
}

Will appreciate any feedback

score 1 · Accepted Answer · answered Dec 19 '22 at 14:07

I also get the same error when installing next.js 13 in --experimental-app

The solution is to use next.js 13.0.6, cause there's something wrong with 13.0.7

  "dependencies": {
    "@next/font": "13.0.6",
    "@types/node": "18.11.17",
    "@types/react": "18.0.26",
    "@types/react-dom": "18.0.9",
    "eslint": "8.30.0",
    "eslint-config-next": "13.0.6",
    "next": "13.0.6",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "4.9.4"
  }

I found the solution here: TypeError: Cannot read properties of undefined (reading 'call') on Next.js

Runtime Error Cannot read properties of undefined (reading 'call') when migrating from next12 to next13

1 Answers1