通过index.js从文件夹导入

Question

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

??? myfile.js 
??? Report
    ??? index.js

根据我的研究，我应该能够在其中导入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

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

说明

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

好奇的细节。在我决定制作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 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';

更新

尝试导入错误：“报告”未从“./Report”导出。

这个错误告诉我们，我们正在尝试import一个named export模块，但模块系统找不到任何named export名为 的模块Report。这是显而易见的，因为我们使用的default export是而不是named export.

更新

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