Why does the React-Magic-Move example break into a JSFiddle with the error "Only a ReactOwner error can have refs"?

Question

I would like to get an example of a “base” (USA) excellent react-magic-move component running on JSFiddle for messing around. (See also an impressive video demo at https://www.youtube.com/watch?v=z5e7kWSHWTg#t=424 )

I added an action-magic-move 'dist' script to the Base React (JSX) script, as well as another (minimally adapted) JS / CSS / HTML example. You can see this attempt:

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

However, it fires an error at the end-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 'render' method). Try rendering this component inside of a new top-level component which will hold the ref.

It explicitly loads the MagicMove code and succeeds in most of the rendering: after the error, the real-DOM assembly was created. Including a dist script after React should work.

Thinking this might be a problem specific to JSFiddle panels, I tried the same setting in local files: same error. Thinking it might be interacting with a JSX-in browser, I tried a pre-compiled JSX: the same error. (See http://jsfiddle.net/5vjqabv3/325/ ). First, an error was received with React 0.13.1; tried to return to 0.12.0 base fiddle: same error. (See http://jsfiddle.net/kb3gN/10548/ )

At the time of the exception, the current element (ReactElement, div, ref 'AL') has the null _owner property, which seems to be turned off.

Any ideas on what impedes the establishment of the necessary owner-agent relationship? Is dist-action-magic-move dist script broken or otherwise unsuitable for use in this desired load-after-react method?

Answer 1

This is what I did to get examples working locally.

 git clone [e-mail] :ryanflorence/react-magic-move.git cd react-magic-move npm install scripts/dev-examples 

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

Answer 2

I had a similar situation with another reaction module. We added an alias to our webpack.config.js called react , which pointed to our node_modules/react . This keeps any other reaction from loading. It will look like

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