Error: addComponentAsRefTo(...)

I’m trying to use react-infinite-calendar in an existing react app. These are my steps:

1. because our webpack config excludes node_modules, webpack wouldn’t run the loaders needed by react-infinite-calendar, therefore I created 2 new loaders in our webpack config:

       {
           test: /\.jsx?$/,
           loaders: ['babel'],
           include: /react-infinite-calendar/
       },
       {
           test: /(\.scss|\.css)$/,
           loaders: ['style', 'css?sourceMap&modules&importLoaders=1&localIdentName=Cal__[name]__[local]!postcss!sass?sourceMap'],
           include: /react-infinite-calendar/
       }
   

2. when I run the application i get the following error

invariant.js:38 Uncaught (in promise) 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 (details: https://fb.me/react-refs-must-have-owner).(…)

The calendar does not render successfully as a result of the exception:

[nickcan]

@clauderic Sorry for bothering. We were able to figure this out. We needed to add “React” to an externals field in our Webpack config. We then found out that npm link breaks the external/peer dependency tree. So, the combo of externals and npm install --save ../path/to/package works.

Just wanted to let you know so you don’t waste your time responding here. Thanks

[nickcan]

Also, as part of my investigation, I ended up refactoring our private package to take a calendar prop. Then in our app, I pass InfiniteCalendar as the prop. That works. Obviously not ideal or a solution my team and I are going to move forward with, but it helped me realize that including the project “higher up” worked. Thanks