Why does React-Magic-Move example break in JSFiddle with “Only a ReactOwner can have refs” error?

Question

I'd like to get the 'basic' (US States) example of the nifty react-magic-move component working at JSFiddle, for tinkering. (See also impressive video demo at https://www.youtube.com/watch?v=z5e7kWSHWTg#t=424)

I've added the react-magic-move 'dist' script to the Base React (JSX) fiddle, plus the other (minimally-adapted) example JS/CSS/HTML. You can see the attempt here:

http://jsfiddle.net/69z2wepo/4692/

However, it's triggering an error late-in-initial-rendering:

Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's 'render' method). Try rendering this component inside of a new top-level component which will hold the ref.

It's clearly loading the MagicMove code and succeeding on most of the rendering: after the error, the real-DOM has been assembled. Including the dist script after React ought to work.

Thinking it might be a problem specific to JSFiddle's panes, I tried the same setup in local files: same error. Thinking it might be a JSX-in-browser interaction, I tried precompiled JSX: same error. (See http://jsfiddle.net/5vjqabv3/325/). First got the error with React 0.13.1; tried rolling back to 0.12.0's base fiddle: same error. (See http://jsfiddle.net/kb3gN/10548/)

At the moment of the exception, the current element (ReactElement, div, ref 'AL') has a null _owner property – which seems off.

Any ideas what's preventing the necessary React-owner-relationship from being set up? Is the react-magic-move dist script broken or otherwise unusable in this desired 'load-after-React' manner?

Answer 1

This is what I did to get the examples working locally

git clone git@github.com:ryanflorence/react-magic-move.git
cd react-magic-move
npm install
scripts/dev-examples

now open up http://localhost:8080/basic/ in your browser, and it works somehow

Answer 2

I had a similar situation with a different react module. What we did was add an alias to our webpack.config.js named react that pointed to our node_modules/react. This keeps any other instances of react from loading. It would look like this

alias: {
    'react': path.join(__dirname, 'node_modules', 'react')
},