5

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?

gojomo
  • 52,260
  • 14
  • 86
  • 115

2 Answers2

2

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

Hayk Saakian
  • 2,036
  • 2
  • 18
  • 31
  • Thanks for confirming it does work via that path! I'd like to base a site on the official 'dist' script... so would really like to see something working in a jsFiddle. – gojomo Mar 26 '15 at 06:42
  • yeah at the moment i'm trying to get it working outside of the examples – Hayk Saakian Mar 26 '15 at 18:57
  • 3
    if you examine the dist/react-magic-move.js file you'll notice it includes a bunch of stuff from React.js according to this other answer, this is the source of the error: http://stackoverflow.com/a/29277601/840099 you end up with two different react.js's: one that you specifically included, and one that the module built into the distributed js file – Hayk Saakian Mar 26 '15 at 20:01
  • 1
    Yes, that looks like the culprit... seems the 'dist' script may be buggy – it definitely needs an earlier script to define React for it, but either react.js or react-with-addons.js trigger the error. – gojomo Mar 27 '15 at 02:48
0

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')
},
Chris
  • 7,270
  • 19
  • 66
  • 110
moebious
  • 1
  • 1