Our project was using https://github.com/danmartinez101/babel-preset-react-hmre for doing hot-reloading of a React/Redux project we're working on.
Due to an issue I was working on I cleared out the old node_modules folder and did a fresh install. After this, I started seeing this
issue:
ERROR in ./src/containers/Root.js
Module not found: Error: Cannot resolve 'file' or 'directory' D:\Documents\GitHub\project\node_modules\babel-preset-react-hmre\node_modules\redbox-react\lib\index.js in D:\Documents\GitHub\project\src\containers
@ ./src/containers/Root.js 27:13-155
ERROR in ./src/containers/Root.js
Module not found: Error: Cannot resolve 'file' or 'directory' D:\Documents\GitHub\project\node_modules\babel-preset-react-hmre\node_modules\react-transform-catch-errors\lib\index.js in D:\Documents\GitHub\project\src\containers
@ ./src/containers/Root.js 31:14-172
ERROR in ./src/containers/Root.js
Module not found: Error: Cannot resolve 'file' or 'directory' D:\Documents\GitHub\project\node_modules\babel-preset-react-hmre\node_modules\react-transform-hmr\lib\index.js in D:\Documents\GitHub\project\src\containers
@ ./src/containers/Root.js 39:14-163
ERROR in ./src/containers/Home.js
Module not found: Error: Cannot resolve 'file' or 'directory' D:\Documents\GitHub\project\node_modules\babel-preset-react-hmre\node_modules\redbox-react\lib\index.js in D:\Documents\GitHub\project\src\containers
@ ./src/containers/Home.js 28:13-155
ERROR in ./src/containers/Home.js
Module not found: Error: Cannot resolve 'file' or 'directory' D:\Documents\GitHub\project\node_modules\babel-preset-react-hmre\node_modules\react-transform-catch-errors\lib\index.js in D:\Documents\GitHub\project\src\containers
@ ./src/containers/Home.js 32:14-172
ERROR in ./src/containers/Home.js
Module not found: Error: Cannot resolve 'file' or 'directory' D:\Documents\GitHub\project\node_modules\babel-preset-react-hmre\node_modules\react-transform-hmr\lib\index.js in D:\Documents\GitHub\project\src\containers
@ ./src/containers/Home.js 40:14-163
When I looked into the location, as expected with NPM3 (running NPM 3.7) those modules were not there, but
redbox-react, react-transform-catch-errors and react-transform-hmr were at the top of the node_modules tree.
As a test, I did drop back to NPM@2 - did another fresh install and lo-and-behold, when it installed the tree inside the
babel-preset-react-hmre folder all of those dependencies were missing - the only one installed was babel-plugin-react-transform.
I added these dependencies to my own package.json, installed them at the top of the tree and was still getting this issue.
As far as I can tell, this project uses require.resolve to find the modules, but even when I modified it to use just require, same
issue.
I really don't know if it's a NPM issue or not, but after trying everything I could think of (and clearing the NPM cache several times) I didn't know what else to do.
However we've have since switched to another hot-loading technique so it's not critial for us anymore, but it is an interesting puzzle.