CODEWITHSUNDEEP
reactjsreact-native
xkeshav
xkeshav

Reputation: 54016

React could not export file from directory/index.js instead looking for directory.js

I am developing basic react app and following this github react respository.

Below is the folder structure inside within project directory (/opt/rqt/)

src/
├── App.css
├── actions.js
├── components
│   ├── App.js
│   ├── Footer.js
│   ├── Link.js
│   ├── Todo.js
│   └── TodoList.js
├── containers
│   ├── AddTodo.js
│   ├── FilterLink.js
│   └── VisibleTodoList.js
├── index.js
├── logo.svg
├── reducers
│   ├── index.js
│   ├── todos.js
│   └── visibilityFilter.js
└── registerServiceWorker.js

/src/index.js

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import App from './components/App'
import reducer from './reducers'
// import todoApp from './reducers' // trial 2
import './App.css'
import registerServiceWorker from './registerServiceWorker';

registerServiceWorker();

const store = createStore(reducer);
// const store = createStore(todoApp); // trial 2

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

/src/reducers/index.js

import { combineReducers } from 'redux'
import todos from './todos'
import visibilityFilter from './visibilityFilter'
const todoApp = combineReducers({
    todos,
    visibilityFilter
});

export default todoApp

but when run npm start it gives following error in browser

Failed to compile ./src/reducers.js Module build failed: Error: ENOENT: no such file or directory, open '/opt/rqt/src/reducers.js' at Error (native)

why react only finding file name reducers.js instead of looking for reducers/index.js ?

Also tried with appending ./reducers/ but not working

what is the issue here?

Upvotes: 2

Views: 1400

Answers (1)

Stvn
Stvn

Reputation: 29

I encountered a similar issue when started with React. Apparently this is caused by in bug in React DOM. There is a similar Github issue here.

What I did is that I terminate the process and re-install the dependencies (npm install)

Then, it work with the code:

/src/reducers/index.js

export default combineReducers({
    // Some Code Here
})

And then, you can easily import it in App.js or index.js:

import rootReducer from "../reducers"

Thus, you can replace rootReducer with any name you like.

Upvotes: 3

Related Questions