Webpack config breaks with storybook 2.1

[moimael]

Hi,

I tried to update storybook to 2.1.0 but css modules do not seems to work with it.

I get a bunch of errors like this one :

ERROR in ./~/css-loader!./~/postcss-loader!./~/style-loader!./~/css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./src/shared/components/burger-icon/burger-icon.css
/home/mlavault/Development/galaxy/src/shared/components/burger-icon/burger-icon.css:5:1: Unknown word
var content = require("!!./../../../../node_modules/css-loader/index.js?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./burger-icon.css");
if(typeof content === 'string') content = [[module.id, content, '']];
^
// add the styles to the DOM

ERROR in ./~/css-loader!./~/postcss-loader!./~/style-loader!./~/css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./src/shared/components/burger-icon/burger-icon.css
Module build failed: TypeError: Cannot read property 'toString' of undefined
    at new Input (/home/mlavault/Development/galaxy/node_modules/css-loader/node_modules/postcss/lib/input.js:31:23)
    at parse (/home/mlavault/Development/galaxy/node_modules/css-loader/node_modules/postcss/lib/parse.js:22:17)
    at new LazyResult (/home/mlavault/Development/galaxy/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:61:24)
    at Processor.process (/home/mlavault/Development/galaxy/node_modules/css-loader/node_modules/postcss/lib/processor.js:34:16)
    at processCss (/home/mlavault/Development/galaxy/node_modules/css-loader/lib/processCss.js:188:11)
    at Object.module.exports (/home/mlavault/Development/galaxy/node_modules/css-loader/lib/loader.js:24:2)
 @ ./src/shared/components/burger-icon/burger-icon.css 4:14-311 13:2-17:4 14:20-317

Here is my webpack config which worked fine with storybook 1.41 :

const config = require('../webpack.config')[0];

module.exports = {
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
      },
      {
        test: /\.json$/,
        loaders: ['json-loader'],
      },
    ],
  },
  resolve: config.resolve,
  node: config.node,
};

Any idea on what's going on ? I tried to look at the doc to see if any changes were needed but it doesn't seems so.

Thanks.

[arunoda]

We've added some default configurations here: https://github.com/kadirahq/react-storybook/blob/master/CHANGELOG.md#v200.

It comes with a default set of loaders similar to "Create React App".

I suspect issues like this. That's why we have done a major release.
Anyway, I know how to fix this issue.

Will do a release soon.

[moimael]

Awesome thanks ! 👍

[arunoda]

I just released a new version with v2.1.1. Could you try that. I hope it'll fix the issue.

[moimael]

Thanks for your reactivity, unfortunately, I get another issue now. The console displays this error :

ReferenceError: assignment to undeclared variable _crypto

[arunoda]

weird. Is to possible for you to send me sample repo, where I can work on this?

[moimael]

Hum not really, our Gihub repo is private. But the error is a bit weird, happens on Chrome and Firefox.
This is the file in question :

(function() {
  var g = ('undefined' === typeof window ? global : window) || {}
  _crypto = (
    g.crypto || g.msCrypto || require('crypto')
  )
  module.exports = function(size) {
    // Modern Browsers
    if(_crypto.getRandomValues) {
      var bytes = new Buffer(size); //in browserify, this is an extended Uint8Array
      /* This will not work in older browsers.
       * See https://developer.mozilla.org/en-US/docs/Web/API/window.crypto.getRandomValues
       */

      _crypto.getRandomValues(bytes);
      return bytes;
    }
    else if (_crypto.randomBytes) {
      return _crypto.randomBytes(size)
    }
    else
      throw new Error(
        'secure random number generation not supported by this browser\n'+
        'use chrome, FireFox or Internet Explorer 11'
      )
  }
}())



/** WEBPACK FOOTER **
 ** node_modules/webpack/~/node-libs-browser/~/crypto-browserify/rng.js
 **/

We can clearly see that _crypto is not defined here. Is it some sort of transpiling/webpack issue ?

[arunoda]

May be this is related to a transpiling error. I think we'll go with some essentials rather using stage0.

[thani-sh]

Better check whether we're getting this error because of stage-0 first.
Having stage-0 is good because it covers requirements of most developers.

On Wed, Aug 3, 2016, 11:11 PM Arunoda Susiripala notifications@github.com
wrote:

May be this is related to a transpiling error. I think we'll go with some
essentials rather using stage0.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#347 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAIV8_7062PhuLkv9DPgIIRPUNFxIuOYks5qcNGngaJpZM4JanPd
.

MN MUHAMMED THANISH
@mnmtanish | HTTP://THANISH.ME http://thanish.me/

[arunoda]

@mnmtanish but these features can be buggy. We anyway allow custom babeljs support if users need it.

Here's some insight from dan about this.
facebook/create-react-app#317 (comment)
I really l like to follow that.

[arunoda]

@moimael Could you try the version 2.2.0 or higher.
We have added more fixes into this.

[moimael]

@arunoda 2.2.0 seems to work perfectly fine, thanks !

[arunoda]

Awesome.