CODEWITHSUNDEEP
reactjstypescriptnext.jsbabeljssyntax-error
matt-harro
matt-harro

Reputation: 11

'import type' declaration failing during build in nextjs project

I'm unable to import the Metadata type from the next module.

The below code is taken directly from the Next.js docs.

THE ERROR

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 you 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"]
}

I'm unsure if my tsconfig.json is correct. It excludes 'node _modules' directory. However the 'next' module is inside the node_modules

Upvotes: 1

Views: 1522

Answers (1)

matt-harro
matt-harro

Reputation: 11

I figured it out:

In my project folder I had a .babelrc file. Having this .babelrc file apparently automatically 'opts out' from using the 'Nextjs compiler'.

The 'Nextjs Compiler' must be important for compiling the typescript imports from the 'next' module.

Sooo, I deleted the .babelrc file aaaand viola... compilation success! #insert Borat here#

I'm unsure of exactly how or why it works, but that solved it... If anyone knows more please enlighten us with your insight!

Upvotes: 0

Related Questions