React: Unexpected use of 'X' no-restricted-globals in ESLint

# React: Unexpected use of 'X' no-restricted-globals in ESLint

The React.js ESLint error "Unexpected use of X no-restricted-globals" occurs for 2 main reasons:

Trying to access a global variable without prefixing it with the window. object.
Defining a variable in your code whose name clashes with a global variable.

unexpected use of no restricted globals

Here is an example of how the error occurs.

App.js

Copied!
function App() {
  // ⛔️ Unexpected use of 'location'. eslint(no-restricted-globals)
  console.log(location);

  return (
    <div style={{margin: 50}}>
      <h2>bobbyhadz.com</h2>
    </div>
  );
}

export default App;

We tried to access the location global variable directly which caused the error.

Instead, the location property should be accessed on the window object.

Here is the complete stack trace.

shell

Copied!
Compiled with problems:

ERROR
[eslint]
src/App.js
  Line 4:15:  Unexpected use of 'location'  no-restricted-globals

Search for the keywords to learn more about each error.

# Make sure to access global variables on the `window` object

If you are trying to access a global variable, e.g. location, confirm or alert, access the variable on the window object.

Here are some examples.

App.js

Copied!
function App() {
  console.log(window.location);
  console.log(window.localStorage);
  console.log(window.sessionStorage);
  console.log(window.confirm);
  console.log(window.alert);

  return (
    <div style={{margin: 50}}>
      <h2>bobbyhadz.com</h2>
    </div>
  );
}

export default App;

If I open the application in my browser, I can see that the global variables are printed to the console and the error is resolved.

accessing globals on window object

You can view all of the global variables that are available on the window object in this section of the MDN docs.

Some of the commonly used variables are:

window.document
window.history
window.innerHeight and window.innerWidth
window.location
window.localStorage and window.sessionStorage
window.scrollX and window.scrollY
window.top
window.clearInterval and window.clearTimeout
window.alert, window.confirm and window.prompt
window.scrollTo
window.setTimeout and window.setInterval

You can view all of the available properties on the window object in this section.

# Defining a variable whose name clashes with a global

Another common cause of the error is defining a variable whose name clashes with a global, e.g. location, alert, confirm, etc.

Make sure that the name of the variable that causes the error doesn't clash with the name of a predefined global variable.
Make sure that the variable you're trying to access has been declared.

App.js

Copied!
// 1) Defining the variable
const myVariable = 'some value';

// 2) Accessing the variable
console.log(myVariable);

If you try to access a variable that hasn't been defined, you will likely get the 'X' is not defined react/jsx-no-undef error.

# Disable the no-restricted-globals ESLint rule for a single line

In some cases, you might get the ESLint error for no good reason.

You can suppress the error by disabling the ESLint rule for a single line.

App.js

Copied!
function App() {
  // eslint-disable-next-line no-restricted-globals
  console.log(location);

  return (
    <div style={{margin: 50}}>
      <h2>bobbyhadz.com</h2>
    </div>
  );
}

export default App;

The following comment has to be added above the line that causes the error.

App.js

Copied!
// eslint-disable-next-line no-restricted-globals
console.log(location);

The comment disables the no-restricted-globals ESLint rule for the next line.

disable no restricted globals rule for 1 line

# Disable the no-restricted-globals rule for an entire file

If you need to disable the no-restricted-globals rule for an entire file, use the following comment instead.

App.js

Copied!
/* eslint-disable no-restricted-globals */

function App() {
  console.log(location);
  console.log(location);
  console.log(location);

  return (
    <div style={{margin: 50}}>
      <h2>bobbyhadz.com</h2>
    </div>
  );
}

export default App;

Make sure to add the comment at the top of your file.

App.js

Copied!
/* eslint-disable no-restricted-globals */

disable no restricted globals rule for entire file

# Disable the no-restricted-globals rule for your entire project

If you need to disable the no-restricted-globals ESLint rule for your entire project, you have to edit the rules section of your .eslintrc config file.

.eslintrc

Copied!
{
    "rules": {
        "no-restricted-globals": "off"
    }
}

Add the no-restricted-globals key to the rules object in your .eslintrc file and set the key's value to off.

If you instead want to specify which globals should be restricted by the rule, set the no-restricted-globals key to an array of globals.

.eslintrc

Copied!
{
    "rules": {
        "no-restricted-globals": ["error", "event", "fdescribe"]
    }
}

If you get the error "'X' is not defined react/jsx-no-undef", check out the following article.

# Conclusion

To solve the React.js ESLint error "Unexpected use of X no-restricted-globals", make sure:

To access global variables on the window object, e.g. window.location.
The names of your local variables don't clash with the names of global variables.
The variables you are trying to access have been declared at the time you're accessing them.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

React: Unexpected use of 'X' no-restricted-globals in ESLint