react compile error, Module not found

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'

https://i.stack.imgur.com/YxPwr.jpg

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

score 0 · Answer 1 · answered Feb 05 '17 at 12:52

0

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.

answered Feb 05 '17 at 12:52

Max Sindwani

1,267
7
15

I'm following this tutorial https://egghead.io/lessons/react-update-react-application-state-from-form-input, at minutes 0:16, you can see the author did not use multiple import. – Benny Edision Feb 05 '17 at 12:55
What setup is the author using? Is here or she using webpack or browserify? – Max Sindwani Feb 05 '17 at 13:04
As others have mentioned, this typically requires an `index.js` script or regex import that exports all of the required dependencies. Most bundlers support this, and it looks like `create-react-app` has a transitive dependency on webpack. – Max Sindwani Feb 05 '17 at 13:24

Shubham Khatri · Answer 2 · 2017-02-05T14:19:33.977

0

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.

edited Feb 05 '17 at 14:19

answered Feb 05 '17 at 13:09

Shubham Khatri

270,417
55
406
400

Did you get a chance to try out the solution. Let me know if you need any help – Shubham Khatri Feb 08 '17 at 06:32

score 0 · Answer 3 · edited May 23 '17 at 12:16

0

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

edited May 23 '17 at 12:16

Community

1
1

answered Feb 05 '17 at 13:13

acharlop

309
4
12

score 0 · Answer 4 · answered Feb 05 '17 at 13:18

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.

react compile error, Module not found

4 Answers4