incorrect .babelrc config file throws an error.

[alvaropinot]

An incorrect .babelrc file such as:

{
  "presets": ["es2015","react-app","flow"],
  "plugins": "css-modules-transform"
}

where plugins is NOT an array will lead to the following error

trace (click to expand)

start-storybook -p 6006 -c .storybook

@storybook/react v3.0.0-rc.2

=> Loading custom .babelrc
/Users/alvaropinot/foo/foo-Web/node_modules/@storybook/react/dist/server/babel_config.js:28
finalConfig.plugins.push([require.resolve('babel-plugin-react-docgen'), { DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES' }]);
^

TypeError: finalConfig.plugins.push is not a function
at exports.default (/Users/alvaropinot/foo/foo-Web/node_modules/@storybook/react/dist/server/babel_config.js:28:23)
at exports.default (/Users/alvaropinot/foo/foo-Web/node_modules/@storybook/react/dist/server/config.js:18:48)
at exports.default (/Users/alvaropinot/foo/foo-Web/node_modules/@storybook/react/dist/server/middleware.js:14:37)
at Object. (/Users/alvaropinot/foo/foo-Web/node_modules/@storybook/react/dist/server/index.js:149:34)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.runMain (module.js:605:10)

npm ERR! Darwin 16.3.0
npm ERR! argv "/Users/alvaropinot/.nvm/versions/node/v7.7.2/bin/node" "/Users/alvaropinot/.nvm/versions/node/v7.7.2/bin/npm" "run" "storybook"
npm ERR! node v7.7.2
npm ERR! npm v4.1.2
npm ERR! code ELIFECYCLE
npm ERR! foo@0.1.0 storybook: start-storybook -p 6006 -c .storybook
npm ERR! Exit status 1

---

As it can be seen the line 69 of babel_config.js relies on finalConfig.plugins being an array to call the push method.

Either the .babelrc file could be validated or the maybe the error could be controlled showing a more user friendly and intuitive message, or even recover from it creating a plain new array. What do you think?

Adding something like the following could do the trick 😄 :

finalConfig.plugins = Array.isArray(finalConfig.plugins) ? 
  finalConfig.plugins :
  [finalConfig.plugins];

[ndelangen]

We can change it to

finalConfig.plugins = [].concat(finalConfig.plugins);

Would you like to do this @alvaropinot ?

[alvaropinot]

Sure @ndelangen, as long as we keep the actual line:

finalConfig.plugins = finalConfig.plugins || [];

to avoid having [undefined] when finalConfig.plugins is not defined :)

[alvaropinot]

The solution is there at #1156, hope you'll find it useful, but maybe checking for the babelrc integrity would be more interesting. What do you think?

[alvaropinot]

Should I close this or are you doing it :D ?