Module not found: 'redux'
ReactjsReact ReduxReactjs Problem Overview
I have create a new react application using create-react-app
cli.
Then i have added the 'react-redux'
library using npm install --save react-redux
.
In package.json
I have:
"react-redux": "^4.4.5"
Unfortunately, the app doesn't compile and it complains with:
Error in ./~/react-redux/lib/utils/wrapActionCreators.js
Module not found: 'redux' in C:\Users\Salman\Desktop\Courses\Internship\React\Youtube-Front-End\node_modules\react-redux\lib\utils
@ ./~/react-redux/lib/utils/wrapActionCreators.js 6:13-29
I have no idea what does it mean?
Here is the complete container:
import React,{Component} from 'react';
import {connect} from 'react-redux';
class BookList extends Component{
renderList(){
return this.props.books.map((book)=>{
<li key={book.title} >{book.title}</li>
});
}
render(){
return(
<div>
<ul>
{this.renderList()}
</ul>
</div>
);
}
}
function mapStateToProps(state){
return{
books:state.books
};
}
export default connect(mapStateToProps)(BookList);
Here is complete package.json
:
{
"name": "Youtube-Front-End",
"version": "0.1.0",
"private": true,
"devDependencies": {
"react-scripts": "0.6.1",
"webpack": "^1.13.2"
},
"dependencies": {
"react": "^15.3.2",
"react-dom": "^15.3.2",
"react-redux": "^4.4.5",
"youtube-api-search": "0.0.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Reactjs Solutions
Solution 1 - Reactjs
You need to install react-redux but also redux library.
npm install --save redux
Solution 2 - Reactjs
react-redux
internally uses Action, ActionCreator, AnyAction, Dispatch, Store
these interfaces form redux
package.
the moment you call
export default connect(mapStateToProps,mapDispatchToProps)(App);
react-redux
try to make use of all these interfaces from redux
package. which is not present at the moment.
So you may have to install react-redux
package along with redux
since both have dependency.
npm install --save redux react-redux
Solution 3 - Reactjs
Set moduleResolution
to node at tsconfig.json
Example:
"compilerOptions": {
"moduleResolution": "node"
}
Solution 4 - Reactjs
You can use the following command:
using npm
npm install redux --save
using yarn
yarn add redux
Solution 5 - Reactjs
I had the same challenge while working with Visual Studio Code (VSC) IDE.
import { createStore, combineReducers, applyMiddleware } from 'redux';
The 'redux' package was being resolved from another place all together, as a dependency within some typescript packages.
I ran yarn add [email protected]
(with the VSC terminal) to re-install the package. Note that i had the exact version within my package.json
as a dependency, and this helps yarn to link the dependencies faster since my goal was not to upgrade redux yet.
Solution 6 - Reactjs
I put my all redux related files to src/redux folder and after some search, I found that this folder name can cause conflicts. After changing the folder name everything works fine.
Solution 7 - Reactjs
For me in typescript it worked as follows:
yarn add @types/redux @types/react-redux
(or with npm
try: npm install add @types/redux @types/react-redux
)
Solution 8 - Reactjs
Just install react-redux if it is not present in package.json using
> npm i react-redux
or install redux if it is not there in package.json
> npm i redux
Solution 9 - Reactjs
You need to install react-redux but also a redux library, both are kind of dependent on each other. Don't forget to import it.
npm install --save redux
Solution 10 - Reactjs
using npm :
npm install redux --save
using yarn :
yarn add redux