Question

我在浏览器中收到此错误

Error in ./src/App.js
Module not found: ./components/todo in C:\Users\James\Desktop\react\src

这是我在编辑器中得到的

import {TodoForm, TodoList} from './components/todo'

http://imgur.com/a/8YLod

我甚至试过import {TodoForm, TodoList} from './components/todo/'我想知道出了什么问题。

Answer 1

对于大多数加载器/捆绑器，导入按模块进行工作。换句话说，您需要通过执行以下操作导入表单和列表：

import { TodoForm } from './components/todo/TodoForm'
import { TodoList } from './components/todo/TodoList'

作为旁注，请参阅https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export以确保您正确导出组件。导入周围的花括号用于命名导出，而不是默认导出。

Answer 2

所以当你做的时候

import {TodoForm, TodoList} from './components/todo'

发生的事情是，您的编译器默认会从TodoForm文件中搜索组件TodoList和index.js，因为您没有明确提到要指向的文件

因此，如果在index.js中添加类似

的内容

export * from './components/todo/TodoForm';
export * from './components/todo/TodoList';

你的方法会奏效。

Answer 3

为了只从目录中导入所有文件，你必须有一个index.js文件，它从目录中导出所有内容

在您的情况下，index.js文件看起来像这样

Export * from 'TodoForm'
Export * from 'TodoList'

请注意，如果导出语句不起作用，请参阅this answer以修复导入/导出语句

Answer 4

您认为，当您撰写import {TodoForm, TodoList} from './components/todo'时，TodoForm中的内容应该是您从文件TodoForm.js导出的价值，还是与TodoList类似的内容？它不起作用。你应该从一些文件导入。当您编写from './components/todo'时，您尝试从todo目录导入。我想，在egghead视频中导入有效，因为它们在index.js目录中有todo个文件。在这个文件中，他们分别为每个组件导出。尝试在index.js目录中添加todo文件，其中包含以下内容：

export * from './TodoForm.js';
export * from './TodoList.js';

它会起作用。

反应编译错误，找不到模块

4 个答案: