我有与这个答案相同的错误，除了它不是只发生在一个文件中，而是发生在许多文件中；一旦我修复了一个文件，另一个文件就会弹出相同的错误。我已经看到了这个答案，但是每当我运行
react-scripts start每次编译时都必须修复每个有此错误的文件，这太耗时了，那么如何消除此错误呢？这似乎只是一个 eslint 问题。
如果您在导入之间声明
variableimport 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';
导入所有内容后声明
variablesimport 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;
我在现有项目中使用
React.lazyFailed to compile.Import in body of module; reorder to top import/firstimport 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'))
当我添加额外的分号“;”时，我遇到了同样的错误在导入声明的末尾。
我建议删除所有无关的分号。这应该会使错误消失。
将每个导入语句移至文件顶部可以解决该问题。
当我像这样在导入之前放置 require 时，就发生了这样的事情：
require('dotenv').config()
import React from 'react';
import ReactDOM from 'react-dom';
...
解决方案：将require放在import之后
如果您使用组件延迟加载，则始终将延迟加载组件导入代码放在正常导入代码下方。
正确示例
import First from './first'
const Second = React.lazy(()=>import("./Second))
错误示例
const Second = React.lazy(()=>import("./Second))
import First from './first'
我也遇到过这个问题。我发现你必须在 JavaScript 文件的顶层导入所有 ES6 模块。”...ES6 模块的结构是静态的，你不能有条件地导入或导出东西。这带来了很多好处。
此限制在语法上通过仅允许在模块顶层进行导入和导出来强制实施：” 来自 Axel Rauschmayer 博士的探索 JS：
错误 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};
当我在 Snippet 2 中将 firebase 更改为 firebase.js 时。 我的错误消失了
我忘了添加来自。
之前：
import UpperBlock;
之后：
import UpperBlock from "../components/dashboard/shared/UpperBlock";
确保正确导入组件，然后停止服务器并再次重新启动。这对我有用。
如果您在现代版本的 React（当前版本 18.0.0）中遇到此错误，请确保在 ReactDOM.createRoot 声明之前进行所有导入。
例如，我收到以下错误：
import App from "./App";
import reportWebVitals from "./reportWebVitals";
const root = ReactDOM.createRoot(document.getElementById("root"));
import { Provider } from "./context";
这将导致错误。相反，导入 createRoot 之前的所有内容：
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { Provider } from "./context";
const root = ReactDOM.createRoot(document.getElementById("root"));
这将修复该错误。简单修复但很容易错过
我在将“react”库导入到我的项目后忘记添加 {Component}，这解决了我的问题。
将所有
importrequire例如
import 'some_module';
require('some_file');
import 'some_other_module');
这会导致错误。
您可能想这样做：
import 'some_module';
import 'some_other_module');
require('some_file');
当我在reactJs项目中安装chat.js库时，我遇到了同样的问题。我通过将 Chart.Js 导入移动到 index.js 文件来解决这个问题
index.js 文件：
import React from "react";
import ReactDOM from "react-dom";
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js"; <--- imported
import "./index.css";
import App from "./App";
ChartJS.register(ArcElement, Tooltip, Legend); <---- imported
如果我在导入语句后面加上双分号，则会出现“错误”。您可以在 import './index.css'; 中看到两张图片之间的差异；不一样
例如：-
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';;
import 'tachyons';
import {robots} from "./Robots";
import reportWebVitals from './reportWebVitals';
import CardList from './CardList';我也遇到了同样的问题。我通过首先添加主要导入来解决
从“react”导入{useState} 导入（'./App.css'）
像这样！