Storybook: Confusing error message if stories import React weirdly

[tomjakubowski]

First of all, thank you so much for react-storybook! It's truly amazing :-)

I'm still getting used to ES6 syntax and all that (~2 years out of the web dev game), so I messed up my imports in my stories file and ended up with something like this:

import { React } from 'react';
import { storiesOf, action } from '@kadira/storybook';
import OrdinalSwapper from '../OrdinalSwapper';

storiesOf('OrdinalSwapper', module)
  .add('now with action logging!', () =>
       <OrdinalSwapper count="10" onSwap={action('swapped')}/>
      );

(note the extra braces around React, which I imagine is doing something like a destructuring assignment)

When I use this stories file, I get this error in react-storybook:

Cannot read property 'createElement' of undefined
TypeError: Cannot read property 'createElement' of undefined
    at eval (webpack:///:6:22)
    at renderMain (webpack:///~/@kadira/storybook/dist/client/preview/render.js:84:38)
    at renderPreview (webpack:///~/@kadira/storybook/dist/client/preview/render.js:99:10)
    at Array.renderUI (webpack:///~/@kadira/storybook/dist/client/preview/index.js:89:26)
    at Object.dispatch (webpack:///~/redux/lib/createStore.js:186:19)
    at ConfigApi._renderMain (webpack:///~/@kadira/storybook/dist/client/preview/config_api.js:46:24)
    at render (webpack:///~/@kadira/storybook/dist/client/preview/config_api.js:64:17)
    at ConfigApi.configure (webpack:///~/@kadira/storybook/dist/client/preview/config_api.js:80:9)
    at Object.eval (webpack:///storybook/config.js:4752:2)
    at eval (webpack:///storybook/config.js:4752:2)

I noticed that if I neglect to import React at all, the error message is much nicer (and so is probably special-cased by something in react-storybook):

React is not defined
ReferenceError: React is not defined
    at eval (webpack:///:6:10)
    at renderMain (webpack:///~/@kadira/storybook/dist/client/preview/render.js:84:38)
    at renderPreview (webpack:///~/@kadira/storybook/dist/client/preview/render.js:99:10)
    at Array.renderUI (webpack:///~/@kadira/storybook/dist/client/preview/index.js:89:26)
    at Object.dispatch (webpack:///~/redux/lib/createStore.js:186:19)
    at ConfigApi._renderMain (webpack:///~/@kadira/storybook/dist/client/preview/config_api.js:46:24)
    at render (webpack:///~/@kadira/storybook/dist/client/preview/config_api.js:64:17)
    at ConfigApi.configure (webpack:///~/@kadira/storybook/dist/client/preview/config_api.js:80:9)
    at Object.eval (webpack:///storybook/config.js:4752:2)
    at eval (webpack:///storybook/config.js:4752:2)

Would it be possible to check for the first error (mis-import of React) as you check for the latter (forgotten import of React)?

[arunoda]

Yep. That's messages coming from webpack and react.
Unfortunately we don't have much control over them.

[dongmingchao]

tsconfig.json => Set"esModuleInterop": trueinstead. About
for more people