TypeScript with TSX fails linting but correctly transpiles

Question

I'm getting this error and I'm unable to resolve the problem.

TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.

I have the following code in a file that has a .tsx extension:

/** @jsx gtap.$jsx */

declare namespace JSX {
    interface IntrinsicElements {
        div: {};
    }
}

class ProjectsView extends controllers.BaseView {
    readonly name: string = "ProjectsView";

    viewContent() {
        return <div className="sss" > [This is a container] </div>;
    }
}

Webpack and VS Code both report that the div isn't being found. Even though the div is being generated correctly.

What am I missing?

This is my tsconfig.json file:

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es2016",
        "sourceMap": true,
        "allowJs": true,
        "strictNullChecks": true,
        "strict": true,
        "noImplicitAny": true,
        "outDir": "./www/assets/dist/",
        "jsx": "react",
        "jsxFactory": "gtap.$jsx"
    },
    "exclude": [
        "node_modules",
        "**/node_modules/*"
    ]
}

Answer 1

I replaced

declare namespace JSX {
    interface IntrinsicElements {
        div: {};
    }
}

with

declare global{
    namespace JSX {
       interface IntrinsicElements {
           div: {};
       }
   }
}

Seems the JSX needs to be in the global namespace.