Using storybook with Webpack 3.0 breaks the hot module replacement.

[kakadiadarpan]

I upgraded the webpack for my project from 2.5.1 to 3.0.0. Now when I start my webpack-dev-server in development mode, it throws the below error:

╰$ yarn start
yarn start v0.24.6
$ webpack-dev-server --config ./config/webpack.config.dev.js
Project is running at http://0.0.0.0:3000/
webpack output is served from /
Content not from webpack is served from /Users/darpan/pwa/src
404s will fallback to /index.html
/Users/darpan/pwa/node_modules/webpack/lib/HotModuleReplacementPlugin.js:59
records.chunkModuleIds[chunk.id] = chunk.mapModules(function(m) {
^

TypeError: chunk.mapModules is not a function
at /Users/darpan/pwa/node_modules/webpack/lib/HotModuleReplacementPlugin.js:59:46
at Array.forEach (native)
at Compilation. (/Users/darpan/pwa/node_modules/webpack/lib/HotModuleReplacementPlugin.js:58:16)
at Compilation.applyPlugins2 (/Users/darpan/pwa/node_modules/tapable/lib/Tapable.js:82:14)
at sealPart2 (/Users/darpan/pwa/node_modules/webpack-dev-server/node_modules/webpack/lib/Compilation.js:629:10)
at Compilation.applyPluginsAsyncSeries (/Users/darpan/pwa/node_modules/tapable/lib/Tapable.js:131:46)
at Compilation.seal (/Users/darpan/pwa/node_modules/webpack-dev-server/node_modules/webpack/lib/Compilation.js:579:8)
at /Users/darpan/pwa/node_modules/webpack-dev-server/node_modules/webpack/lib/Compiler.js:493:16
at /Users/darpan/pwa/node_modules/tapable/lib/Tapable.js:225:11
at _addModuleChain (/Users/darpan/pwa/node_modules/webpack-dev-server/node_modules/webpack/lib/Compilation.js:481:11)
at processModuleDependencies.err (/Users/darpan/pwa/node_modules/webpack-dev-server/node_modules/webpack/lib/Compilation.js:452:13)
at _combinedTickCallback (internal/process/next_tick.js:95:7)
at process._tickCallback (internal/process/next_tick.js:161:9)
error Command failed with exit code 1.

On removing the storybook from the project, it works perfectly fine.

package.json:
"dependencies": {
"axios": "^0.16.2",
"babel-runtime": "^6.23.0",
"classnames": "^2.2.5",
"compression": "^1.6.2",
"concurrently": "^3.5.0",
"cors": "^2.8.3",
"cross-env": "^5.0.1",
"dom-scroll-into-view": "^1.2.1",
"express": "^4.15.2",
"http-proxy-middleware": "^0.17.4",
"localforage": "^1.5.0",
"mime": "^1.3.6",
"prop-types": "^15.5.10",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-input-autosize": "^1.1.4",
"react-redux": "^5.0.4",
"react-router": "3.0.5",
"react-transition-group": "^1.2.0",
"recompose": "^0.23.5",
"redux": "^3.7.1",
"redux-logger": "^3.0.1",
"redux-saga": "^0.15.4"
},
"devDependencies": {
"@storybook/react": "^3.1.6",
"autoprefixer": "^7.1.0",
"babel-core": "^6.24.1",
"babel-eslint": "^7.2.3",
"babel-loader": "^7.0.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.4.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-1": "^6.24.1",
"clean-webpack-plugin": "^0.1.16",
"compression-webpack-plugin": "^0.4.0",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.1",
"dotenv": "^4.0.0",
"eslint": "3.19.0",
"eslint-config-airbnb": "^15.0.1",
"eslint-import-resolver-webpack": "^0.8.1",
"eslint-loader": "^1.7.1",
"eslint-plugin-babel": "^4.1.1",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^5.0.3",
"eslint-plugin-react": "^7.0.1",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.11.1",
"html-webpack-plugin": "^2.28.0",
"lodash-webpack-plugin": "^0.11.3",
"node-sass": "^4.5.3",
"open-browser-webpack-plugin": "^0.0.5",
"postcss": "^6.0.1",
"postcss-cssnext": "^2.11.0",
"postcss-import": "^10.0.0",
"postcss-loader": "^2.0.5",
"preload-webpack-plugin": "^1.2.2",
"progress-bar-webpack-plugin": "^1.9.3",
"promise": "7.1.1",
"react-addons-perf": "^15.4.2",
"react-dev-utils": "^3.0.0",
"react-hot-loader": "next",
"sass-loader": "^6.0.5",
"source-map-loader": "^0.2.1",
"style-loader": "^0.17.0",
"sw-precache": "^5.1.1",
"url-loader": "^0.5.8",
"webpack": "^3.0.0",
"webpack-dev-server": "^2.4.5",
"webpack-shell-plugin": "^0.5.0"
}

[joscha]

references webpack/webpack-dev-server#946

[kakadiadarpan]

Working on a PR for this issue.

[kakadiadarpan]

Running into an issue when trying to build the packages using npm run bootstrap

$ lerna bootstrap
lerna info version 2.0.0-rc.5
lerna info ignore [ 'test-cra', 'react-native-vanilla' ]
lerna ERR! EPACKAGES TypeError: Cannot read property 'split' of undefined
lerna ERR! EPACKAGES at Minimatch.match (/usr/local/lib/node_modules/lerna/node_modules/minimatch/minimatch.js:717:8)
lerna ERR! EPACKAGES at minimatch (/usr/local/lib/node_modules/lerna/node_modules/minimatch/minimatch.js:107:42)
lerna ERR! EPACKAGES at /usr/local/lib/node_modules/lerna/lib/PackageUtilities.js:66:39
lerna ERR! EPACKAGES at Array.every (native)
lerna ERR! EPACKAGES at filterPackage (/usr/local/lib/node_modules/lerna/lib/PackageUtilities.js:65:17)
lerna ERR! EPACKAGES at /usr/local/lib/node_modules/lerna/lib/PackageUtilities.js:217:18
lerna ERR! EPACKAGES at Array.filter (native)
lerna ERR! EPACKAGES at Function.filterPackages (/usr/local/lib/node_modules/lerna/lib/PackageUtilities.js:216:29)
lerna ERR! EPACKAGES at BootstrapCommand.runPreparations (/usr/local/lib/node_modules/lerna/lib/Command.js:235:60)
lerna ERR! EPACKAGES at BootstrapCommand.run (/usr/local/lib/node_modules/lerna/lib/Command.js:147:12)
lerna ERR! EPACKAGES Errored while collecting packages and package graph { TypeError: Cannot read property 'split' of undefined
lerna ERR! EPACKAGES at Minimatch.match (/usr/local/lib/node_modules/lerna/node_modules/minimatch/minimatch.js:717:8)
lerna ERR! EPACKAGES at minimatch (/usr/local/lib/node_modules/lerna/node_modules/minimatch/minimatch.js:107:42)
lerna ERR! EPACKAGES at /usr/local/lib/node_modules/lerna/lib/PackageUtilities.js:66:39
lerna ERR! EPACKAGES at Array.every (native)
lerna ERR! EPACKAGES at filterPackage (/usr/local/lib/node_modules/lerna/lib/PackageUtilities.js:65:17)
lerna ERR! EPACKAGES at /usr/local/lib/node_modules/lerna/lib/PackageUtilities.js:217:18
lerna ERR! EPACKAGES at Array.filter (native)
lerna ERR! EPACKAGES at Function.filterPackages (/usr/local/lib/node_modules/lerna/lib/PackageUtilities.js:216:29)
lerna ERR! EPACKAGES at BootstrapCommand.runPreparations (/usr/local/lib/node_modules/lerna/lib/Command.js:235:60)
lerna ERR! EPACKAGES at BootstrapCommand.run (/usr/local/lib/node_modules/lerna/lib/Command.js:147:12)
lerna ERR! EPACKAGES stack: 'TypeError: Cannot read property 'split' of undefined\n at Minimatch.match (/usr/local/lib/node_modules/lerna/node_modules/minimatch/minimatch.js:717:8)\n at minimatch (/usr/local/lib/node_modules/lerna/node_modules/minimatch/minimatch.js:107:42)\n at /usr/local/lib/node_modules/lerna/lib/PackageUtilities.js:66:39\n at Array.every (native)\n at filterPackage (/usr/local/lib/node_modules/lerna/lib/PackageUtilities.js:65:17)\n at /usr/local/lib/node_modules/lerna/lib/PackageUtilities.js:217:18\n at Array.filter (native)\n at Function.filterPackages (/usr/local/lib/node_modules/lerna/lib/PackageUtilities.js:216:29)\n at BootstrapCommand.runPreparations (/usr/local/lib/node_modules/lerna/lib/Command.js:235:60)\n at BootstrapCommand.run (/usr/local/lib/node_modules/lerna/lib/Command.js:147:12)' }

Can anyone help?

[tarjei]

@kakadiadarpan I run into the problem when I upgrade webpack to 3.0.0 in my main project, but the @storybook/react dependency adds a dependency to webpack 2.6.1 and that webpack version is the one that is linked into the node_modules/.bin directory. Thus webpack-dev-server thinks it is running webpack 2.6.1 instead of 3.0.0.

Installing @storybook/react recreates the problem :(

[duanzhichao]

I have also encountered this problem

[shilman]

@dzc944262316 @jamoha which version of Storybook are you using?

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. We do try to do some housekeeping every once in a while so inactive issues will get closed after 90 days. Thanks!

[stale]

Hey there, it's me again! I am going to help our maintainers close this issue so they can focus on development efforts instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!