Question

在我的React项目（带有Webpack）中，我的文件夹结构如下：

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

基于我的research，我应该能够在Report中导入myfile.js模块，从而：

import { Report } from './Report';

但这不起作用。我得到了错误：

尝试导入错误：未从'./Report'导出'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
}

我该如何解决或至少解决问题？

顺便说一句，我最初使用默认的导出/导入，但是我改成了一个命名的导出/导入，希望它能有所作为。没有。

更新。我真的很抱歉，但是这篇帖子最初是错误地在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'导出'Report'。

此错误告诉我们我们正在尝试import一个named export模块，但是该模块系统找不到任何名为named export的{{1}}模块。很明显，因为我们使用Report而不是default export。

更新

这是一个有效的演示：https://codesandbox.io/s/m7vp982m2p 您可以将其用作参考，然后回顾您的代码，您将找出导致代码无法使用的原因。

Answer 2

解决方案： 重新启动开发服务器。

EXPLANATION

我已经弄明白了。简而言之，我要做的就是重启开发服务器。

好奇的细节。在我决定将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';则确切地知道该去哪里并按预期工作。

重新启动后，服务器将不再看到幻影Report.js，因此将按照预期的那样搜索Report/index.js。现在一切正常，包括原来的默认导出/导入。

Answer 3

看起来您实际上并没有从类中导出对象，这意味着您不需要这样的括号：

import { Report } from './Report';

就像奥斯汀·格雷科（Austin Greco）所说，您应该删除括号，因为您只导出了一件东西，即Report类。

import Report from './Report';

Answer 4

如果您刚刚将应用程序重组为使用index.js，则需要重新启动节点才能使其正常工作。

Answer 5

您只需要在“报告如下：”之后添加斜杠“ /”：

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

通过index.js从文件夹导入

5 个答案: