Storybook: Custom webpack configs: "Full control + remote" mode

[hollandmatt]

Issue details

According to the documentation, it is possible to customize the webpack config used by Storybook like so: https://storybook.js.org/configurations/custom-webpack-config/#full-control-mode--default

Steps to reproduce

• Create new storybook (React)
• Create .storybook/webpack.config.js
• Populate as per the documentation: https://storybook.js.org/configurations/custom-webpack-config/#full-control-mode--default e.g.:

const path = require('path');

module.exports = (baseConfig, env, defaultConfig) => {
  defaultConfig.module.rules.push({
    test: /\.png$/,
    include: path.resolve(__dirname, '../'),
    loader: require.resolve('ignore-loader')
  });

  return defaultConfig;
};

• npm run storybook
• Notice error message:

/Users/mholland/Documents/GitHub/pvc-core/webui/.storybook/webpack.config.js:4
  defaultConfig.module.rules.push({
               ^

TypeError: Cannot read property 'module' of undefined

Seems like the third parameter to the function is not supplied?

Please specify which version of Storybook and optionally any affected addons that you're running

• @storybook/react 3.3.10

Affected platforms

• Mac OS X High Sierra
• Node 6.11.2
• NPM 3.10.10

[igor-dv]

@hollandmatt, this third parameter is a feature that was introduced only this week and wasn't yet released in any official release.

You can use a previous option (it was removed from the docs in favor of a new one)

const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js');

module.exports = (baseConfig, env) => {     
  const defaultConfig = genDefaultConfig(baseConfig, env);
  // ....
}       

[hollandmatt]

@igor-dv So it's just that the docs are ahead of the NPM package? I did end up getting it to work as you suggest.

[igor-dv]

Yeah. Probably a new feature will be released this weekend.

CC. @shilman , @Hypnosphi

[hollandmatt]

OK, sounds good! Should we leave this open until the release is made public, "for the record", and then close it?

[igor-dv]

I'll mark it as merged and it will be closed once the release is out (I hope 😬)

[Hypnosphi]

Released as alpha

[thenickname]

guys, it took me hours to figure out that the docs are not in sync with your current stable release. Just saying. Others will most likely have similar problems and won't be able to get started because the docs basically tell you something that is not true (yet). Maybe it's a good idea to fix the docs? Or at least provide a big fat warning that they are for the current alpha release?

[moljac024]

I have to add a more mean comment than my predecessor. This is very unprofessional and completely unacceptable. It's everything that is wrong with the javascript ecosystem and community.

Storybook is quite a popular library and should lead the way and inspire good engineering practices. But I guess I should set the default bar for a javascript library at "hobby project" for my own sanity in the future.

I apologize if this is too harsh but it has cost me an entire afternoon.

[Hypnosphi]

@ndelangen @storybooks/team how can we set up deploying https://storybooks.js.org from release branch instead of master?

I apologize if this is too harsh

Yes this is. I'm sorry we cost you your time though.

[psimyn]

@Hypnosphi I believe running npm run deploy:manual on the release branch will do it.

Not sure what the normal deploy process is for pages though

[Hypnosphi]

Looks like automated deploy was set up recently, so even if I deploy manually from release branch, it will get overwritten with automatic deploy from master

[thenickname]

thanks for looking into it!

[Hypnosphi]

@thenickname @moljac024

I published docs manually from release branch. It should reflect current stable release state since now
https://storybook.js.org/configurations/custom-webpack-config/#full-control-mode--default

We're going to make https://storybook.js.org a mirror of https://storybooks.netlify.com/ which is deployed from release branch authomatically

[moljac024]

@Hypnosphi thank you for doing this!

[tim-yao]

@Hypnosphi @igor-dv I am getting that error in Jest testing.
TypeError: Cannot read property 'module' of undefined.
However it works in npm run storybook.

I am in 3.4.3 and storybook/vue.
I use "jestWebpackResolver" module with option "webpackConfig": "./.storybook/webpack.config.js".
I tried above old implementation and it is giving me same error. Any idea?
Is that ./.storybook/webpack.config.js right one for import?

[igor-dv]

Your webpack config in the .storybook dir is probably partial. If you are using an extended mode, it doesn't even matche to what webpack wants. All these because storybook manipulates this cnfig before passing it to webpack. So you can't use it as is for other tools.

[tim-yao]

Thanks @igor-dv I was thinking same thing, it's just partial. So is there any way I can get the final storybook webpack config file path which required by "jestWebpackResolver"?