Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

I’m not sure which rule is failing, but if I had a component which had prop name and used it in JSX, while refactoring and renaming prop to title, the leftovers of name prop iN JSX slept unnoticed, and caused errors in production, even with typescript.

Issue Analytics

State:
Created 3 years ago
Comments:16 (10 by maintainers)

Top GitHub Comments

5reactions

ark120202commented, Apr 9, 2020

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.

2reactions

mdjermanoviccommented, Apr 10, 2020

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.