Error when clicking buttons in React/Material-UI project

Hey, folks.

I’m working on a new Meteor project that incorporates both react and material-ui both from NPM.

When I click on a button in this project, I get the following errors:

Uncaught Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component'srendermethod, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner). Uncaught TypeError: Cannot read property 'componentWillLeave' of undefined

It’s acting as if I have two copies of React loaded or something, which doesn’t seem correct at all.

This error only seems to trigger upon clicking a button (which currently has no action associated with any of them), and the animation that occurs when a button is clicked freezes on the first frame.

My current code is located in the following repository: https://github.com/czbaker/artemis-queue-temp

Thanks in advance for any assistance, I don’t know what’s going on at all, and it’s driving me nuts, honestly.

It seems that the problem had to do with using gadicc:ecmascript-hot in my project.

Not sure if it’s due to a bug of some kind, but I got the “multiple React instances” problem when I was using this package for handling hot-reloading of React components.

I removed the package, wiped .meteor/local' and '/node_modules' in my project folder, reinstalled modules (npm install -save`) after removing the requisite NPM stuff from the previously mentioned Meteor package (Atmosphere), and it works fine again.

Weird stuff is weird. I’ll have to write about this experience on that Github project’s issues page, because this sort of bug makes it unusable.

Hey, I cloned your repro at the current commit (a6ad410) and couldn’t reproduce this. I don’t get this error when clicking on any of the “Primary” buttons (in the header or left content area) and the hotloading works great. All I did was clone, npm install, replace ecmascript in .meteor/packages and edit e.g. client/imports/header.jsx.

I think clearing all those dirs and reinstalling might have been the actual fix. Note also that any react Atmosphere package using the older react package from Atmosphere would end up installing and serving a 2nd copy of react, but fortunately the latest version doesn’t do that anymore.

However, if you’re up for re-adding the package again and the same thing happens again, please definitely do open an issue, I’d relate to such an issue very seriously. If possible, a commit from right there and then would be great, along with the output from npm list, and your OS.

FWIW, I’m developing every day atm with the hotloading and react-toolbox package, which is a very similar project to material-ui.