No restricted globals

Question

I am using React and Redux to develop a webapp and when I started up my project I got this:

Line 13:  Unexpected use of 'location'  no-restricted-globals

Search for the keywords to learn more about each error.

I search a lot about how to resolve it, but none of the answers I found helped me, so I turned to Stack overflow.

Does anyone know how to fix this error? I appreciate all the help I can get.

score 653 · Accepted Answer · edited Feb 05 '19 at 14:08

653

Try adding window before location (i.e. window.location).

edited Feb 05 '19 at 14:08

frogatto

28,539
11
83
129

answered Jul 09 '17 at 15:47

Chasen Bettinger

7,194
2
14
30

1

Indeed the correct way to fix this is to prefix location with window.location. For some reason, the CRA team currently considers `location` a "confusing browser global". I'd say if you are using CRA and don't know about the location object, you are in no-mans land. Maybe they just want to make reading url annoying, which would be understandable... – Devin Rhode Sep 25 '19 at 12:44
I created a github issue specifically asking if the `location` object _really_ is a confusing browser global, therefore needing the `window.` prefix everywhere... https://github.com/facebook/create-react-app/issues/7733 – Devin Rhode Sep 25 '19 at 12:45

score 14 · Answer 2 · edited Jul 11 '19 at 12:46

14

This is a simple and maybe not the best solution, but it works.

On the line above the line you get your error, paste this:

// eslint-disable-next-line no-restricted-globals

edited Jul 11 '19 at 12:46

edgar mlowe

161
1
8

answered Aug 18 '17 at 07:51

Martin Nordström

5,779
11
30
64

5

Good solution for a create-react-app project when inlining service workers as blobs. Upvoted. – adc Jan 05 '19 at 01:09
26

This does not solve the issue, just hides the warning. – Alonso Urbano Jul 10 '19 at 07:38
This worked locally for me but in prod it didn't work for some reason – AG_HIHI Aug 24 '23 at 11:51

score 6 · Answer 3 · answered Dec 15 '20 at 09:03

6

Use react-router-dom library.

From there, import useLocation hook if you're using functional components:

import { useLocation } from 'react-router-dom';

Then append it to a variable:

Const location = useLocation();

You can then use it normally:

location.pathname

P.S: the returned location object has five properties only:

{ hash: "", key: "", pathname: "/" search: "", state: undefined__, }

answered Dec 15 '20 at 09:03

Marsou001

81
1
6

2

This answer has nothing to do with the issue. – MMalke Mar 18 '22 at 15:22

score 0 · Answer 4 · answered Jul 21 '20 at 03:06

Perhaps you could try passing location into the component as a prop. Below I use ...otherProps. This is the spread operator, and is valid but unneccessary if you passed in your props explicitly it's just there as a place holder for demonstration purposes. Also, research destructuring to understand where ({ location }) came from.

import React from 'react';
import withRouter from 'react-router-dom';

const MyComponent = ({ location, ...otherProps }) => (whatever you want to render)


export withRouter(MyComponent);

score 0 · Answer 5 · answered Dec 10 '22 at 05:40

This is eslint issue. Same happened to me using name in the input value without defining name state variable.

eslint have a list of restricted words that we cannot use. I was curious about and found this eslint-restricted-globals npm package

Some global variables in browser are likely to be used by people without the intent of using them as globals, such as status, name etc. And because eslint thinks of them as valid global variables, it does not warn in case of bugs.

var restrictedGlobals = require("eslint-restricted-globals");

console.log("restricted ", restrictedGlobals);

this is the list of eslint restricted words

0 : "addEventListener" 1 : "blur" 2 : "close" 3 : "closed" 4 : "confirm" 5 : "defaultStatus" 6 : "event" 7 : "external" 8 : "defaultstatus" 9 : "find" 10 : "focus" 11 : "frameElement" 12 : "frames" 13 : "history" 14 : "innerHeight" 15 : "innerWidth" 16 : "length" 17 : "location" 18 : "locationbar" 19 : "menubar" 20 : "moveBy" 21 : "moveTo" 22 : "name" 23 : "onblur" 24 : "onerror" 25 : "onfocus" 26 : "onload" 27 : "onresize" 28 : "onunload" 29 : "open" 30 : "opener" 31 : "opera" 32 : "outerHeight" 33 : "outerWidth" 34 : "pageXOffset" 35 : "pageYOffset" 36 : "parent" 37 : "print" 38 : "removeEventListener" 39 : "resizeBy" 40 : "resizeTo" 41 : "screen" 42 : "screenLeft" 43 : "screenTop" 44 : "screenX" 45 : "screenY" 46 : "scroll" 47 : "scrollbars" 48 : "scrollBy" 49 : "scrollTo" 50 : "scrollX" 51 : "scrollY" 52 : "self" 53 : "status" 54 : "statusbar" 55 : "stop" 56 : "toolbar" 57 : "top"

Alejandro Lasebnik · Answer 6 · 2022-12-12T10:34:40.183

Since you are using react, I am assuming that you are using the useLocation() function that retrieves the router navigation. In this case it is very common to assign it to a location variable in the following way:

const location = useLocation();

Then, I bet you're using it to retrieve for example the location.pathname. Since eslint is detecting location as an element of window. it will throw the no-restricted-globals error compilation. In order to fix this just rename the variable to the following:

const loc = useLocation();

Check out the following tsx/jsx code that describes the use of it.

const loc = useLocation();
return (
    <div className="App">
        <div className="app-container">
            {loc.pathname !== '/login' && <Menu></Menu>}
            <div className="mid-container">
                <BodyContainer />
            </div>
        </div>
    </div>
);

In the other hand, just in case you are using the location property from window (location.pathname) just adding window to it (window.location.pathname) will solve the issue as explained in the accepted answer.

score -1 · Answer 7 · answered Jul 26 '22 at 12:34

-1

Good afternoon, just copy the following line at the top of your file:

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

That will allow you to disable the eslint rule globally on that specific file.

answered Jul 26 '22 at 12:34

Alberto Perez

2,561
1
14
21

score -4 · Answer 8 · answered Jul 06 '19 at 07:32

-4

/* eslint no-restricted-globals:0 */

is another alternate approach

answered Jul 06 '19 at 07:32

Dan Krueger

457
4
10

score -4 · Answer 9 · edited Apr 27 '21 at 14:08

-4

Just destructure locaton like this: ({location}).

edited Apr 27 '21 at 14:08

shaedrich

5,457
3
26
42

answered Apr 27 '21 at 07:17

Nahid Faraji

1
1

No restricted globals

9 Answers9

Linked

Related