TS1128: Declaration or statement expected (end of file)

Question

I am working on a TypeScript/React project (just getting used to it, haven't written React in a year, etc.), and having an issue.

When I wrote this component, I followed some docs that I found, but I'm getting a TS1128 (Declaration or statement expected) error at the end of this file, and I can't figure out why:

import * as React from 'react';
import Count from './CountDisplay';

interface State {
    count: number;
}

class Counter extends React.Component<{}, State> {

    state: State = {count: 0};

    increment() {
        this.setState({
            count: (this.state.count + 1)
        });
    }

    decrement() {
        this.setState({
            count: (this.state.count - 1)
        });
    }

    render(): JSX.Element {
        return (
            <div>
                <Count count={this.state.count}/>
                <button onClick={this.increment}>Increment</button>
                <button onClick={this.decrement}>Decrement</button>
            </div>
        );
    }
}

export default Counter;

I don't know, why I keep getting an error, because the code looks fine (or so I thought), but I could be wrong.

Below is my TSConfig.json, because I figured maybe it's relevant to the issue:

{
  "compilerOptions": {
    "outDir": "./dist",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es6",
    "jsx": "react"
  }
}

Answer 1

Update 11/05/2020:

Closing and reopening the file fixes it as well. It seems IntelliJ TypeScript parsing can get out of sync.

Original answer

I might be a little late to the party, but I also experienced this and what fixed it for me were the following steps.

1. Create a new file.
2. Copy the contents of the old file to the new file.
3. Delete the old file.
4. Rename the new file to match the old file's name.

Now I'm not exactly sure why that fixes the issue, but I have a few guesses. I'm using IntelliJ, which is I assume what you're using too since I've never had this issue elsewhere, and TS compiles just fine even with the issue present. It's more of an in-editor-error kind of deal (for me at least). Reopening the editor may fix this as well.

Hope this all helps!

Guess 1

Something to do with line endings. Git changes your line endings when you do common git operations based on your OS, since Windows & Linux have different line-ending sequences. That may be something tripping IntelliJ up. I once hit this issue after pulling from `master` on a project, so that gives me this impression.

Guess 2

You have an "invisible" inserted unicode character somewhere in your code. This happened to me a few times, due to a custom MacOS keyboard layout. Both of my hunches hover around things to do with "invisible" characters, but I'm afraid this is where my expertise ends. Maybe someone with some more know-how can chime in down the line.

Answer 2

Unchecking Recompile on changes in Settings > Language & Frameworks > Typescript > Typescript Language Service solved the issue, albeit the underlying cause remains unknown.

Answer 3

When I had this problem in WebStorm 2019.3.1 I was able to resolve it by going to File > Invalidate Caches / Restart... and pressing the "Invalidate and Restart" button. When WebStorm restarted the error was gone.