Redux-devtools: Uncaught Error: Cannot find module "react-json-tree"

[sdhhqb]

When I run webpack-dev-server, this error showing. All the devDependencies packages installed successfully, I just don't know where goes wrong.

Uncaught Error: Cannot find module "react-json-tree"webpackMissingModule @ bundle.js:39966(anonymous function) @ bundle.js:39966__webpack_require__ @ bundle.js:48(anonymous function) @ bundle.js:39655__webpack_require__ @ bundle.js:48(anonymous function) @ bundle.js:39621__webpack_require__ @ bundle.js:48(anonymous function) @ bundle.js:35157__webpack_require__ @ bundle.js:48(anonymous function) @ bundle.js:34713__webpack_require__ @ bundle.js:48(anonymous function) @ bundle.js:7361__webpack_require__ @ bundle.js:48(anonymous function) @ bundle.js:99__webpack_require__ @ bundle.js:48(anonymous function) @ bundle.js:91(anonymous function) @ bundle.js:94
bundle.js:150 [WDS] Errors while compiling.
bundle.js:152 ./~/redux-devtools-log-monitor/~/react-pure-render/function.js
Module build failed: ReferenceError: [BABEL] F:\work\yuqing\node_modules\redux-devtools-log-monitor\node_modules\react-pure-render\function.js: Using removed Babel 5 option: F:\work\yuqing\node_modules\redux-devtools-log-monitor\node_modules\react-pure-render\.babelrc.stage - Check out the corresponding stage-x presets http://babeljs.io/docs/plugins/#presets
    at Logger.error (F:\work\yuqing\node_modules\babel-core\lib\transformation\file\logger.js:41:11)
    at OptionManager.mergeOptions (F:\work\yuqing\node_modules\babel-core\lib\transformation\file\options\option-manager.js:298:20)
    at OptionManager.addConfig (F:\work\yuqing\node_modules\babel-core\lib\transformation\file\options\option-manager.js:240:10)
    at OptionManager.findConfigs (F:\work\yuqing\node_modules\babel-core\lib\transformation\file\options\option-manager.js:446:16)
    at OptionManager.init (F:\work\yuqing\node_modules\babel-core\lib\transformation\file\options\option-manager.js:494:12)
    at File.initOptions (F:\work\yuqing\node_modules\babel-core\lib\transformation\file\index.js:206:75)
    at new File (F:\work\yuqing\node_modules\babel-core\lib\transformation\file\index.js:124:22)
    at Pipeline.transform (F:\work\yuqing\node_modules\babel-core\lib\transformation\pipeline.js:44:16)
    at transpile (F:\work\yuqing\node_modules\babel-loader\index.js:14:22)
    at Object.module.exports (F:\work\yuqing\node_modules\babel-loader\index.js:88:12)
 @ ./~/redux-devtools-log-monitor/lib/LogMonitor.js 29:16-53onSocketMsg.errors @ bundle.js:152sock.onmessage @ bundle.js:187EventTarget.dispatchEvent @ bundle.js:3070(anonymous function) @ bundle.js:6096SockJS._transportMessage @ bundle.js:6094EventEmitter.emit @ bundle.js:3009WebSocketTransport.ws.onmessage @ bundle.js:1689
bundle.js:152 ./~/redux-devtools-log-monitor/~/redux-devtools-themes/lib/index.js
Module build failed: ReferenceError: [BABEL] F:\work\yuqing\node_modules\redux-devtools-log-monitor\node_modules\redux-devtools-themes\lib\index.js: Using removed Babel 5 option: F:\work\yuqing\node_modules\redux-devtools-log-monitor\node_modules\redux-devtools-themes\.babelrc.stage - Check out the corresponding stage-x presets http://babeljs.io/docs/plugins/#presets
    at Logger.error (F:\work\yuqing\node_modules\babel-core\lib\transformation\file\logger.js:41:11)
    at OptionManager.mergeOptions (F:\work\yuqing\node_modules\babel-core\lib\transformation\file\options\option-manager.js:298:20)
    at OptionManager.addConfig (F:\work\yuqing\node_modules\babel-core\lib\transformation\file\options\option-manager.js:240:10)
    at OptionManager.findConfigs (F:\work\yuqing\node_modules\babel-core\lib\transformation\file\options\option-manager.js:446:16)
    at OptionManager.init (F:\work\yuqing\node_modules\babel-core\lib\transformation\file\options\option-manager.js:494:12)
    at File.initOptions (F:\work\yuqing\node_modules\babel-core\lib\transformation\file\index.js:206:75)
    at new File (F:\work\yuqing\node_modules\babel-core\lib\transformation\file\index.js:124:22)
    at Pipeline.transform (F:\work\yuqing\node_modules\babel-core\lib\transformation\pipeline.js:44:16)
    at transpile (F:\work\yuqing\node_modules\babel-loader\index.js:14:22)
    at Object.module.exports (F:\work\yuqing\node_modules\babel-loader\index.js:88:12)
 @ ./~/redux-devtools-log-monitor/lib/LogMonitor.js 33:27-59onSocketMsg.errors @ bundle.js:152sock.onmessage @ bundle.js:187EventTarget.dispatchEvent @ bundle.js:3070(anonymous function) @ bundle.js:6096SockJS._transportMessage @ bundle.js:6094EventEmitter.emit @ bundle.js:3009WebSocketTransport.ws.onmessage @ bundle.js:1689
bundle.js:152 ./~/redux-devtools-log-monitor/~/react-json-tree/lib/index.js
Module build failed: ReferenceError: Unknown plugin "transform-decorators-legacy" specified in "F:\\work\\yuqing\\node_modules\\redux-devtools-log-monitor\\node_modules\\react-json-tree\\.babelrc" at 0, attempted to resolve relative to "F:\\work\\yuqing\\node_modules\\redux-devtools-log-monitor\\node_modules\\react-json-tree"
    at F:\work\yuqing\node_modules\babel-core\lib\transformation\file\options\option-manager.js:212:17
    at Array.map (native)
    at Function.normalisePlugins (F:\work\yuqing\node_modules\babel-core\lib\transformation\file\options\option-manager.js:188:20)
    at OptionManager.mergeOptions (F:\work\yuqing\node_modules\babel-core\lib\transformation\file\options\option-manager.js:310:36)
    at OptionManager.addConfig (F:\work\yuqing\node_modules\babel-core\lib\transformation\file\options\option-manager.js:240:10)
    at OptionManager.findConfigs (F:\work\yuqing\node_modules\babel-core\lib\transformation\file\options\option-manager.js:446:16)
    at OptionManager.init (F:\work\yuqing\node_modules\babel-core\lib\transformation\file\options\option-manager.js:494:12)
    at File.initOptions (F:\work\yuqing\node_modules\babel-core\lib\transformation\file\index.js:206:75)
    at new File (F:\work\yuqing\node_modules\babel-core\lib\transformation\file\index.js:124:22)
    at Pipeline.transform (F:\work\yuqing\node_modules\babel-core\lib\transformation\pipeline.js:44:16)
 @ ./~/redux-devtools-log-monitor/lib/LogMonitorEntry.js 21:21-47

 
f:\work\yuqing>npm list -dev --depth=0
[email protected] f:\work\yuqing  
├── [email protected]  
├── [email protected]  
├── [email protected]  
├── [email protected]  
├── [email protected]  
├── [email protected]  
├── [email protected]  
├── [email protected]  
├── [email protected]  
├── [email protected]  
├── [email protected]  
├── [email protected]  
├── [email protected]  
├── [email protected]  
├── [email protected]  
├── [email protected]  
└── [email protected]

[gaearon]

It is a dependency on redux-devtools-log-monitor and should get installed with it. Try removing node_modules and running npm install again: maybe the install failed last time due to network error or was interrupted.

[sdhhqb]

Thanks for respond.
I removed and reinstalled redux-devtools-log-monitor, but still got these errors. I found the dependencies packages of "redux-devtools-log-monitor" ,

react-pure-render redux-devtools-themes redux-devtools-themes

their .babelrc are write in Babel 5 way. If that's the reason?

For the moment, I use the Chrome Extension instead.

[queckezz]

Yea I have the same problem. The error occures in modules which are written in babel 5. But it shouldn't matter since it has been precompiled.

react-pure-render, redux-devtools-themes 

I think this is related to https://github.com/gaearon/redux-thunk/pull/44 and https://github.com/reactjs/redux/issues/1033#issue-116870190 where when using babel@6 and a dependency is using babel@5 it'll parse the .babelrc of the dependency and fails.

For now you can definitely just remove .babelrc in those modules and it should work.

find node_modules -type f -name .babelrc

Long term we should update the packages using the discussed methods in the issues above (PR's for babel@6 migration are already open):

• Move to babel@6
• Add .babelrc to .npmignore
• Provide an opt-in files list in package.json

[zalmoxisus]

Babel shouldn't process node_modules, configure it as folows:

{
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/
 }

[queckezz]

Cool, that solves it for me, thank you!

[rulatir]

@zalmoxisus "configure it as follows" in which file?

[queckezz]

You can configure it in your webpack.config.js file as follows:

var resolve = require('path').resolve
var webpack = require('webpack')

var config = {
  ...,
  module: {
    loaders: [
      {
        test: /\.js?$/,
        loader: 'babel',
        exclude: /node_modules/
      }
    ]
  },
  ...
}

module.exports = config