addComponentAsRefTo error when using component from storybook

Question

I have made a project with storybook, where I have added some components. When I try to use these components in another project I get an error

Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded.

I build the storybook as

"build": "babel components --out-dir dist-es6 --source-maps inline",

my .babelrc looks like this:

{
"presets": [
  "es2015",  // whichever presets your projects use should match here
  "stage-0",
  "react"
],
"plugins": [
  "transform-runtime", // for polyfills
  "transform-react-remove-prop-types" // we use this to remove the propTypes
]}

I export my component with an index.js file like this:

export { default as DateFilter } from './DateFilter';

I include the component:

import { DateFilter } from 'storybook/dist-es6';

I do a nmp link in the storybook in order to use it in my project. I can see the component, but it fails with the uncaught error.

What to do?

Answer 1

The issue was a problem with storybook and nwb in combination. Both storybook and my project used react, so I needed to ignore the react used by storybook.

This was added to the nwb.config.js file

aliases: {
   react: path.resolve('./node_modules/react'),
   'react-dom': path.resolve('./node_modules/react-dom'),
   'prop-types': path.resolve('./node_modules/prop-types')
 },

In the end I actually removed nwb :)