TypeError: Monitor.update is not a function. (Trying to get example working)

[jasonswearingen]

I'm trying to follow a basic example (the one on the main readme.md file) to get the 3.x of ReduxDevTools working (i got 2.x working fine)

but I'm getting a thrown exception on the return Monitor.update(.... line bellow:

_createDevTools.js_

function createDevTools(children) {
  var _class, _temp;

  var monitorElement = _react.Children.only(children);
  var monitorProps = monitorElement.props;
  var Monitor = monitorElement.type;
  var ConnectedMonitor = (0, _reactRedux.connect)(function (state) {
    return state;
  })(Monitor);
  var enhancer = (0, _instrument2.default)(function (state, action) {
    return Monitor.update(monitorProps, state, action);
  });

strange I tried finding this code on the v3.0.1 tag in github but it's not there ??? something about your build system I suppose....

Any suggestions about what I might be doing wrong?

Here is my code related to creating the devtools, it throws the exception on the last line.

/**
 * workflow for redux devtools v3  https://github.com/gaearon/redux-devtools
 */
module reduxDevTools {

    ///////////////////////////////  REDUX DEVTOOLS v3
    const ReduxDevTools3 = require("redux-devtools");
    const createDevTools = ReduxDevTools3.createDevTools;

    // Monitors are separate packages, and you can make a custom one
    const LogMonitor = require("redux-devtools-log-monitor");
    const DockMonitor = require("redux-devtools-dock-monitor");
    // createDevTools takes a monitor and produces a DevTools component
    export const DevTools = createDevTools(
        // Monitors are individually adjustable with props.
        // Consult their repositories to learn about those props.
        // Here, we put LogMonitor inside a DockMonitor.
        <DockMonitor toggleVisibilityKey='ctrl-h'
            changePositionKey='ctrl-q'>
    <LogMonitor theme='tomorrow' />
            </DockMonitor>
    );
}

/**
 *  //create a single reducer function from our components
 */
const reducer = Redux.combineReducers({
    count: count.reducer, //our example 'count' reducer
    routing: ReduxSimpleRouter.routeReducer //include our routing module
}); 
/**
 * //binds "apply middleware" (the devTools) to our store
 */
const finalCreateStore = Redux.compose(reduxDevTools.DevTools.instrument())(Redux.createStore)
//const finalCreateStore = Redux.compose(ReduxDevTools.devTools())(Redux.createStore) 
/**
 * the whole state tree of the app  use actions to manipulate 
 */
const reduxStore = finalCreateStore(reducer);

[awalkerca]

I'm also seeing this issue, even on v3.0.0.

I asked for some help in the discord channel and was directed to try the following:

const LogMonitor = require('redux-devtools-log-monitor').default;
const DockMonitor = require('redux-devtools-dock-monitor').default;

Since I was using commonJS modules instead of ES6. including the 'default' enabled my monitors to render and for the errors to stop.

[jasonswearingen]

Hi Awalkerca, I'm also using commonjs. Thank you for that info, changing to use .default fixed it for me too.

[zalmoxisus]

We had the same issue in remote-redux-devtools as here with export from. A solution would be like this.

[jasonswearingen]

If it helps anyone in the future, here is a gist of a single file example for redux-simple-router + redux-devtools v3

https://gist.github.com/jasonswearingen/44068ebe04b1b077c8c9

it's Typescript, but easy enough to ignore the typings.

[gaearon]

https://github.com/gaearon/redux-devtools/issues/223#issuecomment-170600130 is the correct solution. We are going with ES6 semantics so CommonJS consumers now need to add .default to get default exports.

[jasonswearingen]

maybe you can encapsulate the thrown exception with something more user friendly? to explain to commonjs users why it went boom and how to fix.

[gaearon]

Yes, a PR to provide a good error message would be most welcome!

[jasonswearingen]

given that I can't even find where this code is located (due to your build system?) I won't be able to. Maybe can add it as a low-priority todo the next time the main contributors make changes.

[gaearon]

I'm not sure what problem is with the build system, but the code is in src folder. Relevant line is here.

What you'll likely want to check is that Monitor is a function (= valid React component), and if not, throw an error right away. Bonus points for checking whether it has a .default field—in this case you can specifically mention that CommonJS consumers need to use .default.