Solving linter error no-undef for document

Question

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?

Answer 1

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:

1. 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'), ); 

2. 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:

1. Set the environment as browser in the configuration:

   {   "env": {     "browser": true,     "node": true   } } 

2. Add it as a global in the configuration:

   {   "globals": {     "document": false   } } 

3) From the CLI:

1. Using env: eslint --env browser,node file.js

2. 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