Trouble using Storybook with Sinon

[ffxsam]

import React from 'react';
import { storiesOf, action } from '@kadira/storybook';
import sinon from 'sinon';
import TrackBrowser from '../features/ReelBuilder/components/TrackBrowser';

const i18n = sinon.stub();

storiesOf('TrackBrowser', module)
  .add('no tracks', _ => <TrackBrowser open />);

I get the following warnings:

[HMR] bundle has warnings:
client.js?3ac5:104 [HMR] ./~/sinon/lib/sinon.js
Critical dependencies:
40:25-32 require function is used in a way in which dependencies cannot be statically extracted
 @ ./~/sinon/lib/sinon.js 40:25-32
client.js?3ac5:104 [HMR] ./~/sinon/lib/sinon/assert.js
Critical dependencies:
216:25-32 require function is used in a way in which dependencies cannot be statically extracted
 @ ./~/sinon/lib/sinon/assert.js 216:25-32
client.js?3ac5:104 [HMR] ./~/sinon/lib/sinon/behavior.js
Critical dependencies:
362:25-32 require function is used in a way in which dependencies cannot be statically extracted
 @ ./~/sinon/lib/sinon/behavior.js 362:25-32
client.js?3ac5:104 [HMR] ./~/sinon/lib/sinon/call.js
Critical dependencies:
230:25-32 require function is used in a way in which dependencies cannot be statically extracted
 @ ./~/sinon/lib/sinon/call.js 230:25-32

And the following red screen:

[thani-sh]

Seems like sinon and webpack don't work well together. I just checked some related issues ( sinonjs/sinon#830 webpack/webpack#304 ) and it seems we can avoid this error using a couple of methods:

use sinon v2
Update the package.json file to use sinon v2 (pre-release) which doesn't have this error. The downside is that there seems to be a few breaking changes between sinon v1 and sinon v2.

"sinon": "2.0.0-pre"

using noParse
A compiled version of sinon can also be used to avoid this issue. Please check this comment and a few comments below that.

[arunoda]

I think this is not directly related to us and @mnmtanish pointed out some great ways to fix it.