eslint: [bug] undefined variable `name` does not trigger errors or warnings in JSX.

There is a no-restricted-globals rule for that. create-react-app is maintaining a confusing-browser-globals package, which is a list of globals you usually want to restrict, including name and event.

As I recal, before in some project I had some kind of comment on top of the file which clearly lists all global variables used in the file, so no accident global variable do not snitch unnoticed, but can’t remember how to enable this functionality again.

/* globals $ fetch */

You can set env: { browser: false } (instead of true) in your config and use /* globals ...*/ comments to enable only browser globals you want to use in that file.

Or, as @webOS101 recommended in this comment, enable just window/document and access browser globals only through those, in which case you should also set env: { browser: false }.

Either of these solutions would lead to no-undef rule warnings on the name reference.

A problem with this might be if @typescript-eslint/eslint-recommended config turns no-undef off, in which case the solution with no-restricted-globals as recommended by @ark120202 in this comment looks like the best approach for a typescript project.

I think the solution to your problem is to remove ‘browser’ from your environment. Then, you won’t be able to access browser globals implicitly like that.

That’s a good solution, too. There is also this link I found: https://github.com/microsoft/TypeScript/issues/14306#issuecomment-552890299

Explicitly enable the globals you need (window or document, for example) and only access the browser through those globals. I can’t speak to the typescript side of things as I just don’t know enough about configuring that.

	"globals": {
		"window": true,
		"document": true
	}

Using version numbers like latest is not very informative, particularly for people looking at this issue in the future. New releases of components happen daily so ‘latest’ at 12:00 may not be the same as ‘latest’ at 2:00.