通过 index.js 从文件夹导入答案

【问题标题】：Import from folder through index.js通过 index.js 从文件夹导入
【发布时间】：2019-04-22 09:49:16
【问题描述】：

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

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

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

import { Report } from './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
}

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

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

更新。我真的很抱歉，但这篇文章最初并错误地在 index.js 中添加了 export default。这不是文件中的实际内容，它可能导致一些回答者走错了路。如上所述，当我将导入从 import Report 更改为 import { Report } 时，我确实将其更改为 export。所以导入和导出应该在任何一种情况下都匹配（命名或默认），但都不起作用。

【问题讨论】：

因为您将其导出为默认值，您应该直接导入它：import Report from './Report';，花括号将用于命名导入（不使用默认值）。
@AustinGreco 与我的错误帖子相反（自更正后），我实际上没有默认导出。当我切换到括号导入时，我切换到了命名导出。换句话说，default 这个词在切换后真的不在我的代码中。我很抱歉。

标签： javascript reactjs import export

【解决方案1】：

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

import { Report } from './Report';

就像 Austin Greco 说的，你应该去掉大括号，因为你只导出一件事，那就是类 Report。

import Report from './Report';

【讨论】：

谢谢，但事实并非如此。我实际上是在使用命名导出。 default 这个词在我的帖子中（已更正），但实际上不在 index.js 中。

【解决方案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 模块，但是模块系统找不到任何名称为Report 的named export 模块。这很明显，因为我们使用的是default export 而不是named export。

更新

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

【讨论】：

非常抱歉，我的帖子中不应该出现 default 这个词，因为它不在文件中。您在更新中得出的结论是合理的，但事实并非如此。看我的更新。（我原来有默认的导入导出，后来改成命名导入导出，同样的问题。）
@bongbang 我为你做了一个演示。 named export 按预期工作。
感谢演示，但我真的很难过。正如你所说，这两行应该是等价的，但它们对我来说不是。一个有效，另一个无效。唯一的区别是/index 中的myfile.js。（index.js 没有任何改变，我发誓。）我可以用有效的版本做些什么来弄清楚为什么另一个不可以？
@bongbang 好吧，请提供一个关于 CodeSandbox 的演示？我会尽力帮你解决的
我已经弄明白了，谢谢。您的演示帮助我相信它必须与我的本地环境一起使用。看我的回答。

【解决方案3】：

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

解释

我已经想通了，有点。简而言之，我所要做的就是重新启动开发服务器。

好奇的细节。在我决定将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，就像它应该做的那样。现在一切正常，包括原始默认导出/导入。

【讨论】：

【解决方案4】：

如果您刚刚重组了应用程序以使用 index.js，那么您需要重新启动节点才能使其工作。

【讨论】：

【解决方案5】：

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

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

【讨论】：

这适用于我的情况。你能解释一下为什么斜线很重要吗？