React-beautiful-dnd: Cant resolve redux although packages are installed?

[Forfold]

This could potentially be an environment issue that I'm having, but I've been battling all day getting this library to load after updating several of my dependencies. Even though I have redux installed, when I use this library it fails to run, giving me the errors:

ERROR in ./node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.esm.js
Module not found: Error: Can't resolve 'redux' in '/path_to_my/node_modules/react-beautiful-dnd/dist'
 @ ./node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.esm.js 7:0-62
 @ ./app/components/xxx.js
 @ ./app/routes.js
 @ ./app/index.js
 @ multi (webpack)-dev-server/client?http://localhost:3030 ./app

ERROR in ./node_modules/react-redux/es/connect/mapDispatchToProps.js
Module not found: Error: Can't resolve 'redux' in '/path_to_my/node_modules/react-redux/es/connect'
 @ ./node_modules/react-redux/es/connect/mapDispatchToProps.js 1:0-43
 @ ./node_modules/react-redux/es/connect/connect.js
 @ ./node_modules/react-redux/es/index.js
 @ ./node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.esm.js
 @ ./app/components/xxx.js
 @ ./app/routes.js
 @ ./app/index.js
 @ multi (webpack)-dev-server/client?http://localhost:3030 ./app
webpack: Failed to compile.

However I have both redux and react-redux in my package.json.

I've tried completely wiping my node_modules and package-lock.json/yarn.lock, reinstalling react-beautiful-dnd, reinstalling redux, react-redux, and even manually installing all of this library's dependencies with their exact versions to no avail.

It is isolated to this library, as if I comment out any code relating to react-beautiful-dnd, my project will load. Have you run into this error, and know how to resolve? I have other packages installed that rely on using redux that work just fine.

|Package|Version|
|-|-|
|react|16.3.2|
|react-beautiful-dnd|^7.1.3|
|redux|^4.0.0|
|react-redux|^5.0.7|

Thanks

[dimitarnestorov]

Can you try running your app without webpack dev server?
Also if you can post your webpack version and config it will be awesome.

[Forfold]

Hey, thanks for the reply. The current webpack versions I am running:

|Package|Version|
|-|-|
|webpack|^4.10.2|
|webpack-cli|^2.1.4|
|webpack-dev-server|^3.1.4|

I just checked and this is latest. I will try to run without webpack and update this comment

Edit: So I don't think I'll be able to start my app up with all of the loaders I require, but here is my information I have on redux:

yarn list redux
yarn list v1.5.1
└─ [email protected]
✨  Done in 1.17s.

it's top level, so i don't see why it can't find it, and:

yarn why redux
yarn why v1.5.1
[1/4] 🤔  Why do we have the module "redux"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "[email protected]"
info Has been hoisted to "redux"
info Reasons this module exists
   - Specified in "dependencies"
   - Hoisted from "react-beautiful-dnd#redux"
info Disk size without dependencies: "220kB"
info Disk size with unique dependencies: "308kB"
info Disk size with transitive dependencies: "332kB"
info Number of shared dependencies: 3
✨  Done in 1.13s.

it even knows that it's required. hmm.. 🤔

[Forfold]

Looks like I found the culprit. Our webpack config has a call to some import aliases that we used to need (a styling library requiring older versions of packages that we had upgraded), and redux was one of them. now that we no longer use that styling library, we were able to drop our import aliases and the app loaded fine.

Sorry to bother 🙁

[xgqfrms]

Q:

./node_modules/react-redux/es/connect/mapDispatchToProps.js
Module not found: Can't resolve 'redux' in 'd:\\RRAIO\src\rra\node_modules\react-redux\es\connect'

A:

maybe you forgot install redux

https://stackoverflow.com/questions/40082477/module-not-found-redux

redux

$ npm i -S redux
# OR
$ yarn add redux

react-redux

$ npm i -S react-redux
# OR
$ yarn add react-redux

[JaeReganCyberSaint]

Just wanted to say that I had the same issue. npm i -S redux did nothing but 'yarn add react-redux' fixed it all.

[hamzawaleed0102]

npm i redux -s resolved the issue for. This command is shorthand for npm install redux --save

[Venryx]

The solution for my encounter with this error was the same as @Auchindoun's: a webpack alias was causing some of the dependencies of react-beautiful-dnd to be attempted to be accessed from the root node_modules folder instead of the local one.

[HeratPatel]

@Venryx any solution for that ?
I have same scenario in my project, and also I used weback alias

[Venryx]

I just updated to the latest version of react-beautiful-dnd, which I found was then compatible with the react-redux version present in the root node_modules folder.

[willvitorino]

Thanks, the tutorial install just react-redux.

[EANadim]

npm install react-redux --save
npm install redux --save

then stop and start your development server

[shodikhuja83]

Failed to compile

./node_modules/react-redux/es/connect/mapDispatchToProps.js
Module not found: Can't resolve 'redux' in 'C:\projects\socialnode_modulesreact-redux\es\connect'

This error occurred during the build time and cannot be dismissed.