Storybook: Using react story book components in another project

Created on 24 Oct 2016 · 5Comments · Source: storybookjs/storybook

I have used https://github.com/kadirahq/react-storybook to create ui components. When i try to import these component in another (my actual) project, it says:
ERROR in ./~/device-explorer-ui-kit/src/web/components/Graph/Slider/GraphSlider.js
Module parse failed: D:\BRD\node_modules\mozilla-neo\node_modules\eslint-loader\index.js!D:\BRD\node_modules\device-explorer-ui-kit\src\web\compone
nts\Graph\Slider\GraphSlider.js Unexpected token (31:12)
You may need an appropriate loader to handle this file type.

In short i am unable to use my components in my actual project. help will be highly appreciated.

@arunoda not sure if you could help on this ?

Source

amna-geniteam

Most helpful comment

Sorry but what is point of building component in storybook if I can't import this component in to my project?

I would expect that I have storybook one one repo and build there components that I will use in different projects.

I should be able to yarn add myStoryBook-project

I should than be able to import them in to project like this

import button from 'myStoryBook/molecule/button'

and just use it in project.

Can someone point on way how you using this?

bojandragojevic on 15 Nov 2016

👍5

All 5 comments

Hey,

Basically storybook has nothing to do with using your components in a different project.
Here the case if your app's webpack setup doesn't match the storybook's default config.

So, I suggest you to upgrade your app's webpack config (or write a custom webpack config for storybook). If not, you could move your app to CRA.

arunoda on 24 Oct 2016

Sorry but what is point of building component in storybook if I can't import this component in to my project?

I would expect that I have storybook one one repo and build there components that I will use in different projects.

I should be able to yarn add myStoryBook-project

I should than be able to import them in to project like this

import button from 'myStoryBook/molecule/button'

and just use it in project.

Can someone point on way how you using this?

bojandragojevic on 15 Nov 2016

👍5

This is a really good point? Bojan Dragojevic Did you find a solution for that?

I'm trying to do exactly the same thing and i get the error

You may need an appropriate loader to handle this file type.

and if is a .jsx file i get the error
InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/button.template.c1d4b770.jsx') is not a valid name.

I use react create app in my project and i know story book uses the same.

Please advise if any solution for this problem.

Thanks in advance...

Lucas