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
1 answers
solution1
0 2022-12-19 14:07:42
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.