如何解决 @typescript-eslint/no-var-requires 错误。添加@axe-core/react 时出错答案

【问题标题】：How to resolve @typescript-eslint/no-var-requires error. Error while adding @axe-core/react如何解决 @typescript-eslint/no-var-requires 错误。添加@axe-core/react 时出错
【发布时间】：2021-05-16 16:21:16
【问题描述】：

我已通过以下方式将 axe-core/react 添加到我的项目中：

npm install --save-dev @axe-core/react

现在我在我的 index.tsx 中添加了以下代码以启动并运行它：

if (process.env.NODE_ENV !== 'production') {
    const axe = require('@axe-core/react');
    axe(React, ReactDOM, 1000);
}

现在，如果我导航到 localhost，页面会显示 compile error 并带有以下消息：

src\index.tsx
  Line 14:17:  Require statement not part of import statement  @typescript-eslint/no-var-requires

此错误发生在以下行：

const axe = require('@axe-core/react');

否则如何导入？

PS：我尝试做类似的事情：

import foo = require("foo")

但还是没有运气。

【问题讨论】：

只要禁用该行的 eslint 规则就可以了
我希望它这么简单......这是企业项目的一部分，不幸的是我做不到，
你试过const axe = await import('@axe-core/react');
好建议，但 Await 对我不起作用，因为我无法使其异步。
stackoverflow.com/a/64016504/3825777

标签： reactjs typescript accessibility web-accessibility

【解决方案1】：

换行

const axe = require('@axe-core/react');

有

import axe from '@axe-core/react';

解决了我的问题。

【讨论】：

一定要检查你的最终捆绑包——斧头很大，很容易滑进去