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

Question

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;

Can you remove commented out `tsconfig.json` entries and perhaps post content of `Header.tsx`? — Nenad, Aug 24 '22 at 20:02
Done! Sorry about that. Having a little trouble getting formatting right too :/ — bonum_cete, Aug 24 '22 at 20:12
It could be linter, not aware of Typescript features, like what is mentioned [here](https://stackoverflow.com/questions/70174124/parsing-error-the-keyword-interface-is-reserved) — Nenad, Aug 24 '22 at 20:19
Yeah, I looked at that one. No luck :/ thanks for your time though — bonum_cete, Aug 24 '22 at 20:32

score 1 · Answer 1 · answered Aug 24 '22 at 21:15

1

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'],

answered Aug 24 '22 at 21:15

bonum_cete

4,730
6
32
56

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

1 Answers1