CODEWITHSUNDEEP
typescriptnext.js
bonum_cete
bonum_cete

Reputation: 4962

Build errors in my next.js app after upgrading to 12.#.# and adding Typescript

As the title say I upgraded my next.js app from 10 something and added TS, added all issues. Running in fine in dev. When I run yarn next build I get the following errors because of my uses of 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;

Upvotes: 1

Views: 967

Answers (1)

bonum_cete
bonum_cete

Reputation: 4962

I needed to run yarn add --dev @typescript-eslint/parser @typescript-eslint/eslint-plugin

and add this to eslintrc.js

extends: ['plugin:@typescript-eslint/recommended'],

Upvotes: 1

Related Questions