Storybook's default webpack config is broken

[shilman]

I wanted to test #918, so I ran the following in the monorepo:

npm install
cd packages/react-storybook
npm link .
cd ../../examples/cra-storybook
npm link \@kadira/storybook
npm install 
npm run storybook

I got the following error:

MBP:cra-storybook shilman$ npm run storybook
yarn storybook v0.21.3
$ start-storybook -p 9009 -s public 
@kadira/storybook v2.35.3

=> Loading static files from: /Users/shilman/projects/storybook/storybook/examples/cra-storybook/public .
=> Using default webpack setup based on "Create React App".
=> Loading custom webpack config (full-control mode).
/Users/shilman/projects/storybook/storybook/packages/react-storybook/dist/server/config/defaults/webpack.config.js:22
  newConfig.plugins = [].concat((0, _toConsumableArray3.default)(storybookBaseConfig.plugins), [new webpack.LoaderOptionsPlugin({
                                                                                                    ^

ReferenceError: webpack is not defined
    at module.exports (/Users/shilman/projects/storybook/storybook/packages/react-storybook/dist/server/config/defaults/webpack.config.js:22:101)
    at exports.default (/Users/shilman/projects/storybook/storybook/packages/react-storybook/dist/server/config.js:53:12)
    at exports.default (/Users/shilman/projects/storybook/storybook/packages/react-storybook/dist/server/middleware.js:14:37)
    at Object.<anonymous> (/Users/shilman/projects/storybook/storybook/packages/react-storybook/dist/server/index.js:151:34)
    at Module._compile (module.js:541:32)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Function.Module.runMain (module.js:575:10)
error Command failed with exit code 1.

I want to figure this out, and also document the setup instructions so that it's easy for reviewers to test changes in the monorepo.

[aaronmcadam]

I've come across stuff like this on my own lerna project, where I want to use some of my packages in the project itself, like eslint and babel configs.

Having to link stuff yourself is what Lerna tries to solve.

If you set react-storybook as a dependency of cra-storybook, lerna should handle linking for you.

Have you asked on lernajs.slack.com @shilman, the community there are pretty good?

[shilman]

This error is due to problems with Storybook's default config. When I created a .storybooks/webpack.config.js in cra-storybook, the problem went away, and the steps above work fine.

We should fix server/config/defaults/webpack.config.js so that imports work and dependencies are satisfied. @ndelangen please weigh in when you get a minute.

Problems:

• webpack not defined => import webpack from 'webpack';
• excludePaths not defined => import { includePaths, excludePaths } from '../utils';
• various postcss-related config errors => is this a webpack2 issue?

[ndelangen]

Is this fixed ?

[usulpro]

Yes, It's solved in #922