Solving linter error no-undef for document

FacundoGFlores picture FacundoGFlores · Jan 25, 2017 · Viewed 34.3k times · Source

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

Nick Bartlett picture Nick Bartlett · Jan 29, 2017

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