Question

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

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

Answer 1

当我像这样在导入之前放置 require 时发生在我身上：

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

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

Answer 2

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

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

Answer 3

将每个导入语句移至文件顶部即可解决此问题。

Answer 4

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

此限制在语法上强制执行仅允许模块顶层的导入和导出：“ 来自Axel Rauschmayer博士的Exploring JS：

Answer 5

我在现有项目中使用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';

解决方案：-

仅重新排列位置，即将所有导入放到最顶部然后反应。懒惰。

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

Answer 6

错误 1。

import React ,{useState ,useEffect} from 'react';
import './App.css';
import Post from './Post';
import db from "./firebase"

右 2。

import React ,{useState ,useEffect} from 'react';
import './App.css';
import Post from './Post';
import db from "./firebase.js"

//这是代码firebase.js

const db = firebaseApp.firestore();
const auth = firebase.auth();
const storage = firebase.storage();

export default {db,auth,storage};

在代码片段2中将firebase更改为firebase.js时。我的错误消失了

Answer 7

如果您在两次导入之间声明了变量，也会收到此错误，

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

在导入所有内容后声明变量解决了我的问题，

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 8

我忘了添加。

之前：

import UpperBlock;

之后：

import UpperBlock from "../components/dashboard/shared/UpperBlock";

确保正确导入组件，然后停止服务器并重新启动。它对我有用。

Answer 9

在将“反应”库导入到我的项目后，我忘记添加{Component}，这解决了我的问题。

Answer 10

将所有的import移动到文件顶部。即使在 require （写在 import 语句之间） 的情况下，也会出现此错误。

例如

import 'some_module';
require('some_file');
import 'some_other_module');

这会导致错误。

您可能想要这样做：

import 'some_module';
import 'some_other_module');
require('some_file');

＆＃34;导入模块体;重新排序到顶部导入/第一个＆＃34;跨越多个文件

10 个答案: