javascript - No restricted globals - Stack Overflow

admin管理员组

文章数量:1129020

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.

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.

• javascript
• reactjs
• react-router
• eslint

Share Improve this question Follow edited Feb 5, 2019 at 14:11 frogatto 29.3k1313 gold badges8989 silver badges134134 bronze badges asked Jul 8, 2017 at 23:29 Martin NordströmMartin Nordström 6,0151111 gold badges3232 silver badges6666 bronze badges

Add a comment  | 

9 Answers 9

Sorted by: Reset to default 672

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

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

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__, }

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);

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.

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"

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.

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

is another alternate approach

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

本文标签： javascriptNo restricted globalsStack Overflow