In my next.js application, I recently upgraded to version 10 and added TypeScript to the mix. Despite ironing out all issues during development, I encountered errors when running yarn next build due to my use of the keyword interface.
./src/components/Header.tsx 7:1 Error: Parsing error: The keyword 'interface' is reserved
{
"compilerOptions": {
/* Visit https://aka.ms/tsconfig to read more about this file */
/* Projects */
"target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
/* Modules */
"module": "commonjs" /* Specify what module code is generated. */,
"rootDir": "./src" /* Specify the root folder within your source files. */,
"sourceMap": true /* Create source map files for emitted JavaScript files. */,
"outDir": "./dist" /* Specify an output folder for all emitted files. */,
"removeComments": true /* Disable emitting comments. */,
"noEmitOnError": true /* Disable emitting files if any type checking errors are reported. */,
"esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
"forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
/* Type Checking */
"strict": true /* Enable all strict type-checking options. */,
/* Completeness */
"skipLibCheck": true /* Skip type checking all .d.ts files. */,
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"noEmit": true,
"incremental": true,
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve"
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}
// Header.tsx
import React from 'react';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import config from '../config';
interface HeaderProps {
home: boolean;
}
const Header = (home: HeaderProps) => (
<Box
sx={{
flexShrink: 0,
paddingTop: home ? '15rem' : '0'
}}>
<Typography
component="h1"
sx={{
fontSize: '2.5rem !important',
lineHeight: 1.2,
fontWeight: 800,
letterSpacing: '-0.05rem',
textAlign: 'center'
}}>
{config.name}
</Typography>
<Typography
sx={{
marginTop: '1rem',
lineHeight: 1.2,
letterSpacing: '-0.05rem',
textAlign: 'center'
}}>
{config.title}
</Typography>
</Box>
);
export default Header;