Having trouble importing the Metadata type from the next module.
The code snippet below is directly from the Next.js documentation.
THE ISSUE
client.js:1 ./app/layout.tsx:3:12
Syntax error: Unexpected token, expected "from"
1 | import React from 'react';
2 | import './globals.css';
> 3 | import type { Metadata } from 'next';
> | ^
> 4 | import { Inter } from 'next/font/google';
> 5 |
> 6 | const inter = Inter({ subsets: ['latin'] });
app/layout.tsx
import React from 'react';
import './globals.css';
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });
export const metadata: Metadata = {
title: 'Play Chopsticks',
description:
'Some call it finger chess, some call it magic fingers. Test your skills and become the number one chopsticks master',
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang='en'>
<body className={inter.className}>{children}</body>
</html>
);
}
// tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"baseUrl": ".",
"paths": {
"@/components/*": ["./components/*"],
"@/app/*": ["./app/*"]
},
"plugins": [
{
"name": "next"
}
]
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}
Not sure if my tsconfig.json is set up correctly. It excludes the 'node_modules' directory, but the 'next' module is located within node_modules.