DockMonitor not set up properly

[mjhall310]

DockMonitor is not set up properly. I get errors like this out of the box.

Warning: Failed propType: Required prop monitorState.position was not specified in DockMonitor. Check the render method of Connect(DockMonitor).

[nicksp]

Hi @mjhall310, thanks for the heads up. Will take a closer look at the problem and fix it.

[nicksp]

@mjhall310, I made some changes to the project. Works for me now. Could you please pull latest changes and try steps from the docs (don't forget to remove local npm dependencies and install them from scratch)?

If it still fails, let me know the steps you did to get it.

[mjhall310]

I cloned nicksp/redux-webpack-es6-boilerplate fresh and see same issue. Perhaps its an issue with a dependency?

I am also seeing two issues now (wanings) like this:
Can't make class AddFriendInput hot reloadable due to being read-only.
These don't worry me as much, but just mentioning...

[SamSamskies]

I have the same issue as well. For me it happens when it hits the path to use window.devToolsExtension().

[Hazantip]

Same issue... ( win10, chrome, npm 3.9.6, node 6.2.2 )

warning.js:44 Warning: Failed propType: Required prop monitorState.position was not specified in DockMonitor. Check the render method of Connect(DockMonitor).

[jonathanmv]

Same here.
Mac OS X El Capitan 10.11.6
npm 3.3.12
node 5.5.0

warning.js:44 Warning: Failed propType: Required prop monitorState.position was not specified in DockMonitor. Check the render method of Connect(DockMonitor).

[jonathanmv]

It's working for me now. To fix it, i had to make sure it's the DevTools.instrument what's called and not the window.devToolsExtension()

This is the code that displays the error and avoids the dock monitor to show up.

   enhancer = compose(
      // Middleware we want to use in development
      middleware,
      window.devToolsExtension ?
        window.devToolsExtension() :
        require('../containers/DevTools').default.instrument(),

      // Optional. Lets you write ?debug_session=<key> in address bar to persist debug sessions
      persistState(getDebugSessionKey())
    );

Removing the window.devToolsExtension ? window.devToolsExtension() made it work for me. The code now looks like shown below.

   enhancer = compose(
      // Middleware we want to use in development
      middleware,
      require('../containers/DevTools').default.instrument(),
      // Optional. Lets you write ?debug_session=<key> in address bar to persist debug sessions
      persistState(getDebugSessionKey())
    );

[nicksp]

@jonathanmv Thanks for the fix. That's exactly what i could discover personally as well while debugging the problem. Will include that in my upcoming update for the boilerplate which hopefully will be released soon.

[goldhand]

The above solution will not use the browser extension if its installed. Thats the point of window.devToolsExtension ?, to check if the browser plugin is there already (no need to use DevTools then). This error comes when you load both the browser plugin and the DevTools npm package but you forget to not load the <DevTools /> component later.

Actual fix should be made inside of the main entry point that renders <DevTools />:

  const DevTools = window.devToolsExtension
    ? () => null
    : require('./containers/DevTools').default;

  ProjectElement = (
    <div>
      <Router history={browserHistory} routes={routes} />
      <DevTools />
    </div>