Storybook: Module not found: Error: Cannot resolve module 'webpack-hot-middleware/client'

[eschaefer]

Like https://github.com/kadirahq/react-storybook/issues/205, tried adding this to an existing project using the guide

$ npm run storybook

...
> start-storybook -p 9001

=> Loading custom webpack config.

React Storybook started on => http://localhost:9001/

webpack built 98767b17b73fd7d3ae0a in 5067ms
Hash: 98767b17b73fd7d3ae0a
Version: webpack 1.13.1
Time: 5067ms
            Asset     Size  Chunks             Chunk Names
preview.bundle.js  3.97 MB       0  [emitted]  preview
manager.bundle.js   796 kB       1  [emitted]  manager
chunk    {0} preview.bundle.js (preview) 1.43 MB [rendered]
    [0] multi preview 52 bytes {0} [built] [1 error]
    [1] ./~/process/browser.js 2.82 kB {0} [built]
    [2] ./~/react/~/fbjs/lib/invariant.js 1.49 kB {0} [built]
    [3] ./~/react/~/fbjs/lib/warning.js 1.75 kB {0} [built]
    [4] ./~/object-assign/index.js 1.99 kB {0} [built]
    [5] ./~/react/lib/ReactDOMComponentTree.js 6.17 kB {0} [built]
    [6] ./~/react/react.js 56 bytes {0} [built]
    [7] ./~/react-router/lib/routerWarning.js 845 bytes {0} [built]
    [8] ./~/react/~/fbjs/lib/ExecutionEnvironment.js 1.06 kB {0} [built]
    [9] ./~/invariant/browser.js 1.52 kB {0} [built]
...
  [419] ./~/string.prototype.padend/polyfill.js 209 bytes {0} [built]
  [420] ./~/string.prototype.padend/shim.js 316 bytes {0} [built]
  [421] ./~/string.prototype.padstart/implementation.js 975 bytes {0} [built]
  [422] ./~/string.prototype.padstart/polyfill.js 213 bytes {0} [built]
  [423] ./~/string.prototype.padstart/shim.js 324 bytes {0} [built]
  [424] ./src/scripts/components/lib/Button.less 1.09 kB {0} [built]
  [425] ./src/scripts/components/lib/Icon.less 1.09 kB {0} [built]
  [426] ./~/symbol-observable/index.js 101 bytes {0} [built]
  [427] ./~/symbol-observable/ponyfill.js 350 bytes {0} [built]
  [428] ./~/uuid/rng-browser.js 682 bytes {0} [built]
  [429] ./~/uuid/uuid.js 5.29 kB {0} [built]
chunk    {1} manager.bundle.js (manager) 324 kB [rendered]
    [0] multi manager 28 bytes {1} [built]
  [190] ./~/@kadira/storybook/dist/manager.js 324 kB {1} [built]

ERROR in multi preview
Module not found: Error: Cannot resolve module 'webpack-hot-middleware/client' in /Users/e.scha/Projects/project
 @ multi preview

Really lost about how to resolve this, since I'm using npm version 3+ and no other similar bug reports have had an issue on this version.

$ npm -v && node -v
3.8.5
v5.6.0

Tried this already too:

$ rm -rf node_modules/
$ npm i webpack-hot-middleware --save-dev

[arunoda]

That's weird. I couldn't re-produce this.
Could you send me a sample repo, where I can work with.

[tcoopman]

I can confirm the same issue on 2 pc's (1 mac, 1 windows). All runing npm 3.x. But the same repository works on another windows pc. So we're also lost at the moment.

We tried: rm -rf node_modules && npm cache clean and compared shrinkwrapped outputs, but we can't get it to work.

I cannot provide a sample repo, but I'm not sure if it's a repo thing...

[tcoopman]

@eschaefer a workaround that works for us at the moment is to reove the 'webpack-hot-middleware/client' from dist/server/webpack.config.js

[ThaumRystra]

Using meteor npm i --save-dev @kadira/storybook instead of just npm i --save-dev @kadira/storybook fixed this for me in a Meteor project.

[eschaefer]

@tcoopman I did this as well, and it fixed the issue for now. Would still love to have hot module loading in the future, but this at least lets me move forward.

[arunoda]

This is a weird issues. Guys, help us to figure our what's going on here. (I know it's hard to create a re-producible build)

I want this to be fixed somehow.

cc @mnmtanish

[eschaefer]

@arunoda I will continue investigating and will report what I find. (I can't share the current repo this is happening on, unfortunately)

[tcoopman]

It's a very strange issue. At the moment I don't have time to further investigate.
I also checked the global npm packages and couldn't find anything wrong with those.

I will update when I find out more.

[arunoda]

Guys, I also found this issue. I haven't started to fix it.

Pinpoint @kadira/storybook to version 1.22.1 to get rid of this in the short-term.

[arvi]

Encountering the same issue while trying to learn Mantra via mantra sample blog app. Accessing the url results to empty storybook.

Here:

React Storybook started on => http://localhost:9001/ 

webpack built 956d48c7a989333d37fb in 452ms
Hash: 956d48c7a989333d37fb
Version: webpack 1.13.1
Time: 452ms
            Asset     Size  Chunks             Chunk Names
manager.bundle.js   621 kB       0  [emitted]  manager
preview.bundle.js  22.4 kB       1  [emitted]  preview
chunk    {0} manager.bundle.js (manager) 251 kB [rendered]
    [0] multi manager 28 bytes {0} [built]
    [1] ./~/@kadira/storybook/dist/manager.js 251 kB {0} [built]
chunk    {1} preview.bundle.js (preview) 40 bytes [rendered]
    [0] multi preview 40 bytes {1} [built] [2 errors]

ERROR in multi preview
Module not found: Error: Cannot resolve module 'webpack-hot-middleware/client' in /home/arvi/Projects/mantra-sample-blog-app
 @ multi preview

ERROR in multi preview
Module not found: Error: Cannot resolve module 'babel' in /home/arvi/Projects/mantra-sample-blog-app
 @ multi preview

Machine: Elemantary OS Freya (if that's important to know :smile: )

[vjau]

I got the same problem with 1.22.1

[arunoda]

Guys, try the new version v2.2.0. It might fix this issue.

[arunoda]

Closing this since we fixed this with v2.2.0. Please reopen if it's not.

[cookcc]

the above methods that i try fail，finally figure out my problem method is use specific version webpack-dev-sever， like 3.1.0 and on on