“在模块主体中导入；重新排序到顶部导入/首先”跨多个文件

Question

我和这个答案有同样的错误，除了它不是只出现在一个文件中，而是出现在许多文件中；一旦我为一个文件修复它，另一个就会弹出相同的错误。我已经看到了这个答案，但是每当我运行时，都会react-scripts start在我的 src 中创建 node_modules 文件夹，因此该解决方案不可行。

每次编译时都必须修复每个有此错误的文件太费时了，那么我该如何摆脱这个错误呢？这似乎只是一个 eslint 问题。

Answer 1

如果您variable在导入之间声明了 a ，则会收到此错误，

import React from 'react';
import axios from 'axios';

const URL = process.env.REACT_APP_API_BASE;

import demoXLXSFile from '../../assets/others/Demo.xlsx';
import './student.list.styles.scss';

variables导入所有内容后声明，

import React from 'react';
import axios from 'axios';
import demoXLXSFile from '../../assets/others/Demo.xlsx';
import './student.list.styles.scss';

const URL = process.env.REACT_APP_API_BASE;

Answer 2

我React.lazy在现有项目中使用时发现了这个问题。我收到此错误Failed to compile.:- Import in body of module; reorder to top import/first(使用 create-react-app)。

import React from 'react';
import SelectField from '../inputs/SelectField';
const Questions = React.lazy(() => import('./questions'))
import _ from 'lodash';

解决方案：-

只重新排序位置，即把所有导入放在最上面，然后 react.lazy。

import React from 'react';
import SelectField from '../inputs/SelectField';
import _ from 'lodash';
const Questions = React.lazy(() => import('./questions'))

Answer 3

当我添加一个额外的分号 ';' 时，我遇到了同样的错误 在导入语句的末尾。

我建议删除任何多余的分号。这应该会使错误消失。

Answer 4

将每个 import 语句移到文件的顶部可以解决这个问题。

Answer 5

当我将 require 放在 import 之前时，就发生了这样的情况：

require('dotenv').config()
import React from 'react';
import ReactDOM from 'react-dom';
...

解决方案：将require放在import之后

Answer 6

我也遇到过这个问题。我发现你必须在 JavaScript 文件的顶层导入所有 ES6 模块。”...ES6 模块的结构是静态的，你可以\xe2\x80\x99t 有条件地导入或导出东西。这带来了多种好处。

\n\n

通过仅允许在模块顶层导入和导出，从语法上强制执行此限制：“\n来自 Axel Rauschmayer 博士\xe2\x80\x99s探索 JS：

\n