Storybook: Possible to use the top-level Webpack config?

[kevinSuttle]

Do you need to have 2 separate Webpack configs?

[arunoda]

Hmm not, you can use the exisiting one.
Import it and use the parts needed in the storybook version.

And checkout the full control version too. See: https://github.com/kadirahq/react-storybook/blob/master/docs/webpack_full_control_mode.md

[arunoda]

Do you need something else? May be we can do something about it.

[kevinSuttle]

Ah, that. https://github.com/kadirahq/react-storybook/blob/master/docs/webpack_full_control_mode.md#full-control-mode

[arunoda]

Is that helped you?

[kevinSuttle]

A little. It's not clear how the top-level Webpack config file is known, though.

[kevinSuttle]

Can you show a full example using a webpack.config.js in the root?

[evanc]

All you need to do is require your "top level" webpack.config.js in your .storybook/webpack.config.js.

For instance, here's my .storybook/webpack.config.js file, in its entirety:

module.exports = require('../webpack.config.js');

[kevinSuttle]

❯ start-storybook -p 9001 -c _storybook

=> Loading custom webpack config (full-control mode).
/Users/kevinSuttle/Code/platform-ui-primitives/node_modules/@kadira/storybook/dist/server/middleware.js:14
  if (publicPath[0] === '/') {
                ^

TypeError: Cannot read property '0' of undefined
    at exports.default (/Users/kevinSuttle/Code/platform-ui-primitives/node_modules/@kadira/storybook/dist/server/middleware.js:14:17)

I tried just require() and it can't find my CSS all of a sudden.

[kevinSuttle]

No luck with this, still.

[kevinSuttle]

Aha. Since the top-level config is Webpack 2, then it needs to return a function in the config inside storybook. Notice the trailing () self-invoking function.

module.exports = require('../webpack.config.js')();

[jonathanphz]

I'm trying to do the same thing but getting errors.

=> Loading static files from: /Users/jonathan/Sites/projectA/public .
=> Loading custom addons config.
=> Loading custom webpack config (extending mode).
/Users/jonathan/Sites/projectA/node_modules/@storybook/react/node_modules/webpack/lib/webpack.js:19
                throw new WebpackOptionsValidationError(webpackOptionsValidationErrors);
                ^

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'postcss'.

I'm using an ejected CRA with Webpack 1.14.0

[sevagsim]

@jonathanphz Were you able to get this to work with webpack 1? I'm still on it, and can't upgrade webpack for a while. Any help would be appreciated.

[jonathanphz]

@sevagsim Hi - this was some time ago so I can't remember the exact steps but looking at my project I see I created a webpack.config.js file inside the '.storybook' directory. Here's the file attached in case it helps you out. (Couldn't upload js files so I changed the format to txt file - just switch it back to js).
webpack.config.txt