I am using airbnb
extension for linting my React Project. Now, in my index.js
I have:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root'),
);
linter says:
no-undef 'document' is not defined.at line 8 col 3
How can I solve this problem?
There are a number of ways to solve/get around this. The two key ways are to either specify document
as global
or to set the eslint-env
as browser
(what you probably want). You can do this 1) in-file, 2) in the configuration, or even 3) when running from the CLI.
1) In-file:
Set the environment as browser
in your file:
/* eslint-env browser */
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root'),
);
Add it as a global in the file itself:
/* global document */
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root'),
);
2) In the eslint configuration:
Set the environment as browser
in the configuration:
{
"env": {
"browser": true,
"node": true
}
}
Add it as a global in the configuration:
{
"globals": {
"document": false
}
}
3) From the CLI:
Using env: eslint --env browser,node file.js
Using globals: eslint --global document file.js
Resources:
Specifying Globals with ESLint
Specifying Environments with ESLint
Specifying env with ESLint CLI
Specifying globals with ESLint CLI