Does it support .jsx file?

[jiji262]

Does it support .jsx file?

[arunoda]

Yes it is. Do you found any issues with that?

[jiji262]

Yes, with .jsx component, we get a error message:
Error: Cannot find module "../XXX"
(../XXX.jsx is the component)

[arunoda]

That's pretty weird.
Make sure you've the latest version of @kadira/storybook. (currently v1.9.0)

If it's the latest, could you send us a sample repo where we can reproduce it locally.

[jiji262]

Hi,

I forked the demo codes here: https://github.com/jiji262/react-storybook-simple-demo

I have a demo file for jsx: react-storybook-simple-demo/blob/master/TreeView.jsx

And add this component in story script react-storybook-simple-demo/components/stories/button.js:
import Tree from '../TreeView';

Then the error is:

ERROR in ./components/stories/button.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../TreeView in D:\storybook\components\stories
resolve file
D:\storybook\components\TreeView doesn't exist
D:\storybook\components\TreeView.webpack.js doesn't exist
D:\storybook\components\TreeView.web.js doesn't exist
D:\storybook\components\TreeView.js doesn't exist
D:\storybook\components\TreeView.json doesn't exist
resolve directory
D:\storybook\components\TreeView doesn't exist (directory default file)
D:\storybook\components\TreeView\package.json doesn't exist (directory description file)
[D:\storybook\components\TreeView]
[D:\storybook\components\TreeView.webpack.js]
[D:\storybook\components\TreeView.web.js]
[D:\storybook\components\TreeView.js]
[D:\storybook\components\TreeView.json]
@ ./components/stories/button.js 7:16-38.

I am wondering maybe somewhere I am wrong, could you take a look? Thanks.

[wwfalcon]

import Tree from '../TreeView';
should be:
import Tree from '../../TreeView.jsx';

[jiji262]

@wwfalcon : I tried "../../" and it got the same error as before.

[wwfalcon]

copy your "webpack.config.js" to ".storybook",and add jsx loader:
{ test: /\.jsx$/, loaders: [ 'babel' ], exclude: /node_modules/, include: __dirname },

[jeef3]

I think the .jsx part of the import is actually quite important. You can see the list of files it's attempting to match and none of those attempts have the .jsx extension.

[evidens]

If you want to resolve .jsx without including the extension, you need to ensure you have the correct webpack configuration:

{
  // … other webpack.config.js options
  resolve: {
     extensions: ['', '.js', '.jsx'],
     // …
  },
  // …
}

Otherwise, webpack will only allow .js files without the explicit extension.

This issue can be closed - it's a confusion about import paths + webpack module resolve config. Duplicate of #127.

The issue can probably be avoided in the future by adding the resolve config that @evidens offered into the webpack config in the example repo

[arunoda]

Yes. I think this can be closed.