Импорт из папки через index.js

Question

В моем проекте React (с Webpack) моя структура папок выглядит следующим образом:

├── myfile.js 
├── Report
    ├── index.js

Основываясь на моих исследованиях , я смогу импортировать модуль Report в myfile.js, таким образом:

import { Report } from './Report';

Но это не работает. Я получил ошибку:

Попытка импортировать ошибку: «Отчет» не экспортируется из «./Report» .

Это так, однако.

import { Report } from './Report/index';

My Report/index.js имеет следующий экспорт:

// export default class Report extends Component { // this was a typo
export class Report extends Component {    
  // etc
}

Как мне решить эту проблему или хотя бы устранить ее?

Кстати, я изначально использовал экспорт / импорт по умолчанию, но я перешел на именованный в надежде, что это будет иметь значение. Это не так.

Обновление. Мне очень жаль, но в этом посте изначально и по ошибке было export default в index.js. Это не то, что на самом деле находится в файле, и это могло привести некоторых из ответчиков по неверному пути. Я изменил это значение на export, когда изменил импорт с import Report на import { Report }, как я сказал выше. Поэтому импорт и экспорт должны совпадать в любом случае (именованном или по умолчанию), и ни один из них не работал.

Answer 1

Поскольку ваше имя файла index.js, эти две строки эквивалентны:

import { Report } from './Report';  // by default, the module system will look for the index.js file inside a folder
import { Report } from './Report/index';

Следовательно, нет причины для второй подход сработал, но первый не сработал

---

В вашем случае, поскольку вы используете default export вместо named export, для использования экспортируемого модуля эти оба способа будут работать для вас:

import Report from './Report'
import Report from './Report/index';

---

ОБНОВЛЕНИЕ

Попытка импортировать ошибку: «Отчет» не экспортируется из ./Report'.

Thisошибка говорит нам, что мы пытаемся import модуль named export, но система модулей не может найти никаких модулей named export с именем Report.Это очевидно, поскольку мы используем default export, а не named export.

---

ОБНОВЛЕНИЕ

Это рабочая демонстрация: https://codesandbox.io/s/m7vp982m2pВы можете использовать его в качестве ссылки, а затем оглянуться назад на свой код и выяснить, почему ваш код не работает.

Answer 2

РЕШЕНИЕ: Перезапустите сервер разработки.

---

ОБЪЯСНЕНИЕ

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

Подробности для любопытных.Прежде чем я решил сделать Report папкой, это был файл в той же папке, что и myfile.js.

├── myfile.js 
├── Report.js

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

Затем я создал новую папку Report и переместил Report.js в нее, используя git mv Report.js Report/index.js все время, пока сервер разработки еще работал и он перестал работать.

Я не уверен, почему это не сработало точно (кажется, я помню другое сообщение об ошибке, чем то, которое было взято в моем посте), но я подумал, что мой экспорт по умолчанию был проблемой, и приступил к изменениюЭто.

Сервер разработки, конечно, распознал изменения, которые я сделал в файлах, но, видимо, он все еще думал, что удаленный Report.js все еще существует, будь то пустой файл или старая версия или что-то еще.С import { Report } from './Report'; он получит или попытается получить старый Report.js и потерпит неудачу, тогда как с import { Report } from './Report/index'; точно знал, куда идти и работал, как ожидалось.

После перезапуска сервер больше не видит phantasmic Report.js и, таким образом, ищет Report/index.js далее, как и положено.Теперь все работает, включая оригинальный экспорт / импорт по умолчанию.

Answer 3

Похоже, что вы на самом деле не экспортируете Объект из своего класса, а это значит, что вам не нужны такие скобки:

import { Report } from './Report';

Как сказал Остин Греко, вы должны удалить скобки, потому чтовы экспортируете только одну вещь - класс Report.

import Report from './Report';