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 610 · Accepted Answer · edited Feb 05 '19 at 14:08

610

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

edited Feb 05 '19 at 14:08

frogatto

27,475
10
76
119

answered Jul 09 '17 at 15:47

Chasen Bettinger

6,665
1
12
28

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 13 · Answer 2 · edited Jul 11 '19 at 12:46

13

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

151
1
8

answered Aug 18 '17 at 07:51

Martin Nordström

5,219
10
25
59

5

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

This does not solve the issue, just hides the warning. – Vladimir Nul Jul 10 '19 at 07:38

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

4

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

51
5

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 -3 · Answer 5 · edited Apr 27 '21 at 14:08

-3

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

edited Apr 27 '21 at 14:08

shaedrich

4,826
2
26
35

answered Apr 27 '21 at 07:17

Nahid Faraji

1
1

score -4 · Answer 6 · 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

369
2
10

No restricted globals

6 Answers6

Linked