通過 index.js 從文件夾導入

Question

在我的 React 項目（帶 Webpack）中，我的文件夾結構如下：

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

根據我的研究，我應該能夠在myfile.js導入Report模塊，因此：

import { Report } from './Report';

但這不起作用。 我得到了錯誤：

嘗試導入錯誤：“報告”未從“./報告”導出。

然而，這確實如此。

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

我的Report/index.js有以下導出：

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

我該如何解決這個問題或至少解決它？

順便說一句，我最初使用默認導出/導入，但我改用了一個命名的，希望它會有所作為。 它沒有。

更新。 我真的很抱歉，但這篇文章最初並錯誤地在index.js有export default 。 這不是文件中的實際內容，它可能導致一些回答者走上了錯誤的道路。 如上所述，當我將導入從import Report更改為import { Report }時，我確實將其更改為僅export 。 所以導入和導出應該在任何一種情況下（命名或默認）都匹配，並且都不起作用。

Answer 1

解決方案：重新啟動開發服務器。

---

解釋

我已經想通了，有點。 簡而言之，我所要做的就是重新啟動開發服務器。

好奇的細節。 在我決定將Report設為文件夾之前，它是與myfile.js位於同一文件夾中的文件。

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

我有一個在本地運行的開發服務器，一切正常。

然后我創建了一個新文件夾Report並在開發服務器仍在運行並且停止工作的同時使用git mv Report.js Report/index.js將Report.js移動到其中。

我不確定為什么這不起作用（我似乎記得與我帖子中摘錄的錯誤消息不同的錯誤消息），但我認為我的默認導出是問題所在，並着手更改它。

開發服務器當然可以識別我對文件所做的更改，但顯然它仍然認為已刪除的Report.js仍然存在，無論是空白文件還是舊版本或其他任何內容。 使用import { Report } from './Report'; 它會獲取或嘗試獲取舊的Report.js並失敗，而import { Report } from './Report/index'; 確切地知道去哪里並按預期工作。

重新啟動后，服務器不再看到幻覺的Report.js ，因此接下來會搜索Report/index.js ，正如它應該的那樣。 現在一切正常，包括原始默認導出/導入。

Answer 2

由於您的文件名是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';

---

更新

嘗試導入錯誤：“報告”未從“./報告”導出。

這個錯誤告訴我們我們正在嘗試import一個named export模塊，但模塊系統找不到任何named export Report named export模塊。 很明顯，因為我們使用的是default export而不是named export 。

---

更新

這是一個有效的演示： https : //codesandbox.io/s/m7vp982m2p您可以將其用作參考，然后回顧您的代碼，您將弄清楚為什么您的代碼不起作用。

Answer 3

看起來您實際上並未從類中導出 Object，這意味着您不需要這樣的大括號：

import { Report } from './Report';

就像 Austin Greco 所說的那樣，您應該刪除大括號，因為您只導出一件事，即類 Report。

import Report from './Report';

Answer 4

如果您剛剛重組了您的應用程序以使用 index.js，那么您將需要重新啟動節點才能使其工作。

Answer 5

您只需要在“報告如下”后添加一個斜杠“/”：

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