Possible Issue with ESLint

[kevinrjones]

I'm a new-ish user of create-react-app so not sure if this is something I've done.

I've created a new app with npx create-react-app my-app --template typescript

and I've added this code to App.tsx

// imports here

export interface UserLoggedInAction {
readonly type: string;
payload: string;
}

function App() {

// rest of code here

If I build this then everything builds ok. However, as soon as I add an .eslintrc.js (or .eslintrc.json) file the build breaks with errors

5 | export interface UserLoggedInAction {
> 6 | readonly type: string;
| ^
7 | payload: string;
8 | }

I get other errors as well, for example if I do

let foo = "" as string

then the 'as' isn't recognised (Parsing error: Unexpected token, expected ";"), it looks like it's switching into Javascript mode instead of Typescript mode.

Just to emphasise this is with the latest react-scripts (4.0.1), nothing else changed in the project apart from adding the code above and the eslintrc file which can be empty or have some configuration in it.

This did work with the version of react-scripts I was using up to now (3.4.4)

I'm pretty sure I can live without the eslintrc file I have so it's not a showstopper for me. I was wondering if anybody else had seen this?

[ChristianMurphy]

Your custom ESLint config isn't setup with TypeScript support.
You can extend the default ESLint config, which includes typescript support, if you want https://create-react-app.dev/docs/setting-up-your-editor/#extending-or-replacing-the-default-eslint-config
Or you can setup ESLint TypeScript yourself https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/README.md

[kevinrjones]

Thanks Christian,

your second suggestion worked for me,

Kevin