错误：'document'未定义：eslint / React

Question

我正在使用create-react-app构建React应用程序。

运行ESLint时出现以下错误：
8:3 error 'document' is not defined no-undef.

我的应用程序没有错误，但是我在2个文件中收到了这个ESLint错误。请查看其中一个.jsx文件和我的ESLint配置。

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

我应该如何修复这个问题？目前我将简单地忽略这两个文件...但我更愿意找到一个长期的解决方案。

- Thomas Sauvajon

Answer 1

将"browser": true添加到你的env中以包含全局变量（如document、window等）。

有关更多信息，请参见ESLint环境文档。

- Lucas

---

不清楚该怎么做，应该在哪里添加，是哪个文件？ - zishe

请参考 eslintrc.js 文件中的 "env" 属性。请查看 ESLint 文档以了解如何配置它 https://eslint.org/docs/user-guide/configuring - Lucas

我应该删除 node: true 吗？ - chovy

Answer 2

在你的eslint.rc文件中设置环境属性，例如：

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

- Hom Bahrani

---

尽管@Locus的回答还可以，但这是一个更好的解决方案，因为它不依赖于链接（可能在某一天会失效），并且描述了解决问题的步骤。 - Ghasem

Answer 3

如果你有.eslintrc.json文件，那么添加下面的代码片段。

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

如果您没有.eslintrc.json文件，则可以将这些设置添加到您的package.json文件中。

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

- Ajay Rawat

Answer 4

在你的package.json文件中，将jest的测试环境指定为"jsdom"，如下所示：

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

我曾遇到过同样的问题，这对我很有效。

- Peter

---

不知道为什么这不是谷歌的首选结果。这绝对是解决方案。我没有意识到 Facebook React 测试脚本在其 -env=jsdom 命令行参数中所做的事情。 - Steve