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

Question

I got this error in my browser

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

This is what I got in my editor

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

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

I even tried import {TodoForm, TodoList} from './components/todo/' I wonder what's wrong.

Answer 1

Imports work on a per module basis for most loaders/bundlers. In other words, you'll need to import the form and list by doing the following:

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

As a side note, see https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export to make sure that you're exporting the components correctly. The curly braces around your import works for a named export as opposed to a default export.

Answer 2

So the thing is that when you do

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

What happends is that your compiler will by default search the components TodoForm and TodoList from the index.js file since you have not mentioned explicitly which files to point to

So if in index.js you add something like

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

Your approach will work.

Answer 3

In order to just import all files from the directory you must have an index.js file that exports everything from the directory

Which in your case the index.js file would look like this

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

Note if the export statement doesn't work see this answer to fix the import / export statement

Answer 4

Do you think, when you wrote import {TodoForm, TodoList} from './components/todo' , in TodoForm should be value than you exported from file TodoForm.js , and similarly with TodoList ? It's don't works. You should do import from some file. When you wrote from './components/todo' you tried doing import from todo directory. I guess, in egghead video that import works, because, they have index.js file in todo directory. And in this file they do export for every component separately. Try to add index.js file in todo directory with the following contents:

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

it's will work.