Specific Webpack Loader is Required for React?

[adrianmcli]

I'm trying to use storybook for an existing component in my Mantra app. The ChatInput.jsx component has two import statements at the top for React and the PureRenderMixin. I had assumed that storybook would work out of the box with Mantra apps. Do I need to do some webpack configuration in order to load my component?

This is the error I get from the storybook GUI:

My First Button
ERROR in ./client/modules/chat/components/ChatInput.jsx
Module parse failed: /Users/adrianmc/dev/olis-mantra/client/modules/chat/components/ChatInput.jsx Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import React from 'react';
| import PureRenderMixin from 'react-addons-pure-render-mixin';
| 
 @ ./.stories/chatInput.js 9:17-75

This is the story file:

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

import ChatInput from '../client/modules/chat/components/ChatInput.jsx';

storiesOf('ChatInput', module)
  .add('simple', () => (
    <ChatInput />
  ));

[arunoda]

Just rename you module to ChatInput.js and it'll work.

[adrianmcli]

@arunoda Thanks! You may close this.

[arunoda]

Great.

[kevinSuttle]

Seeing the same issue locally, but not using a .jsx file extension.

It's specifically calling out line 42: https://gist.github.com/arunoda/fb3859840ff616cc5ea0fa3ef8e3f358#file-register-js-L42

<div style={styles.notesPanel}>

I used the guide and gist from here: https://getstorybook.io/docs/addons/writing-addons

I tried putting the root .babelrc in .storybook. No dice.
https://getstorybook.io/docs/configurations/custom-babel-config

[kevinSuttle]

There seems to be a lot of info missing from the docs, like adding babel etc, and specifying a dist folder.

https://github.com/kadirahq/storybook-addon-notes/blob/master/register.js
https://github.com/kadirahq/storybook-addon-notes/blob/master/package.json#L53

Or that you need: .storybook/config.js and .storybook/stories.js

[kevinSuttle]

I have a working implementation here: https://cloudup.com/cwK7EtZCpaw