«Импорт в теле модуля; переупорядочить в начало импорт / сначала» Во многих файлах

Я тоже столкнулся с этой проблемой. Я обнаружил, что вы должны импортировать все модули ES6 на верхнем уровне файлов JavaScript. "... структура модулей ES6 статична, вы не можете условно импортировать или экспортировать вещи. Это дает множество преимуществ.

Это ограничение вводится синтаксически разрешение импорта и экспорта только на верхнем уровне модуля: " Из Изучение JS доктора Акселя Раушмайера:

Я обнаружил эту проблему, когда использовал React.lazy в моем существующем проекте. Я получил эту ошибку Failed to compile.: - Import in body of module; reorder to top import/first (с приложением create-response-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'))

вы получите эту ошибку, если вы объявили variable между импортами,

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;

Я получил ту же ошибку, когда добавил лишнюю точку с запятой ';' в конце оператора импорта.

Я предлагаю удалить лишние точки с запятой. Это должно устранить ошибку.

Перемещение каждого оператора импорта в верхнюю часть файла решает проблему.

Неправильный 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};

Когда я меняю firebase на firebase.js во фрагменте 2. Моя ошибка исчезла

Я забыл добавить от.

Перед:

import UpperBlock;

После:

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

Убедитесь, что вы правильно импортировали свой компонент, а затем остановите сервер и перезапустите его снова. У меня это сработало.

Я забыл добавить {Component} после импорта библиотеки "реагировать" в мой проект, это решило мою проблему.

Со мной случилось, когда я поставил требование перед импортом вот так:

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

Решение: поместите требование после импорта.