error 'document' is not defined : eslint / React

Question

I'm building a React app, with create-react-app.

I got the following error when running ESLint:
8:3 error 'document' is not defined no-undef.

My app runs without error, but I got this ESLint error in 2 files. See one of those .jsx files and my ESLint configuration.

index.jsx:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

ReactDOM.render(
  <App />,
  document.getElementById('root'),
);

eslintrc.js:

module.exports = {
  "extends": "airbnb",
  "plugins": [
      "react",
      "jsx-a11y",
      "import"
  ],
  "env": {
    "jest": true
  }
};

How can I fix this ? For the moment I will simply ignore both files ... but I'd rather find a long term solution.

Answer 1

Add "browser": true your env to include global variables (like document, window, etc.)

See the ESLint environment documentation for more information.

Answer 2

set an env property in you eslint.rc file, e.g.

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

Answer 3

In your package.json, specify the test environment for jest as "jsdom" as follows:

  "jest": {
    "testEnvironment": "jsdom"
  }

I faced the same issue and it worked well for me.

Answer 4

If you have .eslintrc.json file then add following code snippet.

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

if you do not have .eslintrc.json then you can add these settings in you package.json file.

{
    ...otherSettings,
    "eslintConfig": {
      "globals": {
        "window": true
      }
    }
}