BUG: 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

[rasmuslundberg]

Im getting this error message,

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 

react-bootstrap-table has worked perfectly until all of a sudden this appeared. I have tried to alias. Im using:
"react-bootstrap-table": "^2.6.0",

Also using webpack, tried:
resolve: {
alias: {
'react': path.resolve(__dirname, '../node_modules/react')
},
extensions: ['', '.js', 'jsx']
},
..But that didn't help.

Based on the error message there is some refs misson on ComponentDidUnMount() when a new table is requested... Anyone have a idea whats wrong?

[rasmuslundberg]

An update, the subpackage react-toastr has another version of react than i use, this causes a crash that makes my app unusable... How can i prevent this?

[AllenFang]

Check #838 and this

Cause of react-toastr have some issue on [email protected], so I fork it and restricts its react version as less than 15.4.x. it's a workaround for now. BTW what's the version of react and when did you got this error message?

[musbaig]

Hello: I'm seeing this error also. Interestingly enough it only showed up after we deployed our code to AWS, thus, adding some real testable latency to everything. Not seeing the issue locally, which is odd. Btw, I have react-toastr v2.8.2 installed as well. Running react-bootstrap-table v2.6.0. Any recommendations? Awesome work btw!!

[musbaig]

Update: so I removed react-toastr entirely from my app, since I didn't need it just yet, and redeployed, but, still seeing the same error, which is making the app unusable.

[musbaig]

Update 2: @rasmuslundberg rolling back to v2.5.9 will resolve the issue for now.

[AllenFang]

@musbaig, what's the version of your npm. I'm also Interesting that you still encounter the error after uninstall reat-toastr.

In you local development, did you remove the node_module dir and install all again?

[rasmuslundberg]

Hi!

@AllenFang im running react 15.4.0, i got this message in out prod and test environments but not locally. Just as you @musbaig... i rolled back immidiatelly. Thank you for the Quick response!

[AllenFang]

@rasmuslundberg, what's the npm version you used? And because I test it on my local, it's all fine. Currently, there's only one known bug is that if you use npm@2 and [email protected] will throw some error messages when webpacking, see #838 (comment)

BTW, if you can, please tell the your npm version, react version, your step to reproduce and which step got the error is better to me to find the root cause. If a simple and minimal repo for me is awesome.

Thanks :)

[musbaig]

@AllenFang I'm running [email protected] and [email protected] in my aws deploy. Not much I can add in terms of reproducibility, I have a basic table, starts with empty data array that is later populated with real data via api call, that's it really. Table is basic, no components embedded in any of the cells. Incidentally, locally I'm using npm @3.10.3 and [email protected].

[AllenFang]

@musbaig, thanks, I'll check this out :)

[AllenFang]

hi all, I've test on my local with [email protected] and [email protected] but I have no any error on webpacking or running. BTW, [email protected] and [email protected]

BTW, I just setup a simple react boilerplate and change react version as ^15.0.0 and add react-bootstrap-table, finally run npm install,
after installation, there's no any peerdependency are missing and everything is fine.

In v2.6.0, as I mentioned before, I fork react-toastr and make its react version less than 15.4.x. So in my consideration, if you use npm@3 and have a [email protected] env, after you installing react-bootstrap-table, you will see the react-toastr be installed it self react version with 15.3.2, as following:

[melo1523]

"<script src="build/react.js"></script>
<script src="build/react-with-addons.js"></script>
<script src="build/react-dom.min.js"></script>
<script src="build/react-dom-server.js"></script>" this will work

" <script src="build/react.js"></script>
<script src="build/react-dom.min.js"></script>
<script src="build/react-dom-server.js"></script>
<script src="build/react-with-addons.js"></script>" this will cause bug

[gauravagam]

Hey @AllenFang I am facing the same issue. I am using [email protected], [email protected], [email protected] and [email protected]. Please reply me as soon as possible. Here is the screenshop of table installation

[AllenFang]

@gauravagam, sorry, this issue is supposed to be fixed, but I still cant reproduce this issue currently, I will try again with your environment.

[gauravagam]

Ok @AllenFang

[nakamorichi]

I'm getting this issue after cloning react-bootstrap-table locally, building it, and npm installing it from the cloned directory.

[AllenFang]

please check #1216, if you have any concern or question, let me know in #1216

[AllenFang]

After v4.0.0, react-bootstrap-table doesn't use react-toastr` anymore.