TypeError: Cannot read property '_currentElement' of null

[binarykitchen]

Happens when running Jest tests on iojs:

- TypeError: Cannot read property '_currentElement' of null
    at ReactCompositeComponentMixin._updateRenderedComponent (/home/michael-heuberger/Development/<our project>/node_modules/react/lib/ReactCompositeComponent.js:744:52)
    at ReactCompositeComponentMixin._performComponentUpdate (/home/michael-heuberger/Development/<our project>/node_modules/react/lib/ReactCompositeComponent.js:726:10)
    at ReactCompositeComponentMixin.updateComponent (/home/michael-heuberger/Development/<our project>/node_modules/react/lib/ReactCompositeComponent.js:642:12)
    at wrapper [as updateComponent] (/home/michael-heuberger/Development/<our project>/node_modules/react/lib/ReactPerf.js:70:21)
    at ReactCompositeComponentMixin.performUpdateIfNecessary (/home/michael-heuberger/Development/<our project>/node_modules/react/lib/ReactCompositeComponent.js:539:12)
    at Object.ReactReconciler.performUpdateIfNecessary (/home/michael-heuberger/Development/<our project>/node_modules/react-select/node_modules/react/lib/ReactReconciler.js:115:22)
    at runBatchedUpdates (/home/michael-heuberger/Development/<our project>/node_modules/react-select/node_modules/react/lib/ReactUpdates.js:151:21)
    at ReactReconcileTransaction.Mixin.perform (/home/michael-heuberger/Development/<our project>/node_modules/react-select/node_modules/react/lib/Transaction.js:134:20)
    at ReactUpdatesFlushTransaction.Mixin.perform (/home/michael-heuberger/Development/<our project>/node_modules/react-select/node_modules/react/lib/Transaction.js:134:20)
    at ReactUpdatesFlushTransaction.assign.perform (/home/michael-heuberger/Development/<our project>/node_modules/react-select/node_modules/react/lib/ReactUpdates.js:95:38)
    at Object.flushBatchedUpdates (/home/michael-heuberger/Development/<our project>/node_modules/react-select/node_modules/react/lib/ReactUpdates.js:175:19)
    at Object.wrapper [as flushBatchedUpdates] (/home/michael-heuberger/Development/<our project>/node_modules/react-select/node_modules/react/lib/ReactPerf.js:70:21)
    at ReactDefaultBatchingStrategyTransaction.Mixin.closeAll (/home/michael-heuberger/Development/<our project>/node_modules/react-select/node_modules/react/lib/Transaction.js:207:25)
    at ReactDefaultBatchingStrategyTransaction.Mixin.perform (/home/michael-heuberger/Development/<our project>/node_modules/react-select/node_modules/react/lib/Transaction.js:148:16)
    at Object.ReactDefaultBatchingStrategy.batchedUpdates (/home/michael-heuberger/Development/<our project>/node_modules/react-select/node_modules/react/lib/ReactDefaultBatchingStrategy.js:66:19)
    at Object.enqueueUpdate (/home/michael-heuberger/Development/<our project>/node_modules/react-select/node_modules/react/lib/ReactUpdates.js:215:22)
    at enqueueUpdate (/home/michael-heuberger/Development/<our project>/node_modules/react-select/node_modules/react/lib/ReactUpdateQueue.js:30:18)
    at Object.ReactUpdateQueue.enqueueSetState (/home/michael-heuberger/Development/<our project>/node_modules/react-select/node_modules/react/lib/ReactUpdateQueue.js:208:5)
    at ReactComponent.setState (/home/michael-heuberger/Development/<our project>/node_modules/react-select/node_modules/react/lib/ReactComponent.js:69:20)
    at componentWillMount (/home/michael-heuberger/Development/<our project>/node_modules/react-select/lib/Select.js:149:8)

[edgesoft]

Can you post you test?

[theogravity]

I'm getting this as well, but unsure what causes it.

[edgesoft]

@binarykitchen Have you checked the test folder to see how React select is doing their tests

[theogravity]

I think it has to do with some module not being a peerDependency when doing an npm link in my custom code. Generally I have react in my component as a peerDep, but doing that doesn't work in this case. I know that publishing my module does solve the issue.

[binarykitchen]

I cannot reproduce the above anymore. Feels unstable. I guess I ll have to use npm's shrinkwrap to make sure I have always the same dependencies all the time.

I recommend you to pinpoint exact versions, not to use ^ in your package.json.

[RicardoBrazao]

Do you have any fix to this issue? i have the same error with the simplest example i could find.

var CustomSelect = require('react-select');

  render() {
    var options = [
        { value: 'one', label: 'One' },
        { value: 'two', label: 'Two' }
    ];
    return (
      <div>
        <CustomSelect name= "batatas" value= "one" options={ options } />
      </div>
    );
  },

[Zalastax]

I'm too having this problem. Using latest bower, reactify and react 0.13.3. node_modules completely cleared. Cloning the repo and running the examples work so I guess there has to be something wrong with my setup. Is it possible that there is a react version mismatch even though I cleared node_modules? I'll keep investigating...

[bruderstein]

@Zalastax Are you by any chance including the react.js script in your html, creating the React global variable? react-select uses require('react'), so if you've got a global, you'll end up with 2 React's, which causes this error. If that's the case, either switch to require('react') (recommended), or stub out the react module in your browserify / webpack config.

(Incidentally, you probably want to use babelify rather than reactify - reactify uses jsxtransform which is now officially deprecated).

[bruderstein]

@binarykitchen The problem can be the install order with peerDeps if you're on npm 2.x. If react-select is installed first (or any module with a peerDep of react), npm 2.x will install it as a dependency. If you then npm install react, you'll end up with 2. This is fixed in npm 3 (yay!)

I also often get issues with npm link, as often react is listed as a devDependency, hence when npm link'ing, I also end up with 2. I've taken to doing an npm install ../path/to/my/component rather than npm link - not as nice a workflow, but doesn't come the deps issue :)

[bruderstein]

If we could get a reproducible version of this in a repo it would be good, but as it's no longer reproducible, and the other issues are almost certainly duplicate react issues, I'll close this off. Feel free to reopen if things resurface.

[Zalastax]

@bruderstein Thank you for the input.
I'm sure this is an error in our gulp setup but it's difficult to find where. We use literalify as well which replaces require("react") with window.React so this befuddles me. I've also checked the node_modules and can only find react 0.13.3 in there...
No npm link, cleared node_modules, and even tried using shrinkwrap. The blob output seemed good as well. I'll try making our gulpfile more modern and see if that helps.

[bruderstein]

Does the gulp replace go through the node_modules too? (Or maybe there's a require('react/addons') in there somewhere? Might be worth searching the generated bundle file for "ReactMount", to see if it lands in there somehow. I think you're right, and switching to a completely require'd react is probably easiest / most reliable.

[binarykitchen]

right, thx @bruderstein