Error running basic readme example

[super-cache-money]

I'm using react 13.1, and trying to render the example in the readme:

React.createClass({
    render: function(){
        var options = [
            { value: 'one', label: 'One' },
            { value: 'two', label: 'Two' }
        ];

        function logChange(val) {
            alert("Selected: " + val);
        }

        return <Select
            name="form-field-name"
            value="one"
            options={options}
            onChange={logChange}
        />
    }
})

I get this error in the browser:

Uncaught TypeError: Cannot read property '_currentElement' of null 

It's thrown from line 7351 in react-with-addons.js:

var prevRenderedElement = prevComponentInstance._currentElement;

I've loaded lodash and react of course.

[MatthewHerbst]

I am getting the same error though running my own code, not the example. For me the error appears to come from line

ReactRef.detachRefs(internalInstance, internalInstance._currentElement);

[dcousens]

I believe this is because of the version of react used. @JedWatson can you give more insight?

[MatthewHerbst]

For me this ended up being caused by a bug in react-d3. The bug had been causing errors before but they had been minor errors and the program run continued. I think some change in react v0.13 changed the way the errors were handled to be breaking errors. However, I couldn't find anything in the release notes to back up that theory.

[RusAlex]

I also met this bug.

[RusAlex]

react: 0.13.3 react-select: 0.4.9

[RusAlex]

removed

[nivekmai]

Also seeing this error with my minimal test, same versions of react and react-select as RusAlex.

[RusAlex]

Seems like it's related with npm. Temporary solution:

rm -rf node_modules/react-select 
rm -rf node_modules/react
npm install react
npm install react-select

Do not install react-select first, let react library be installed first.

[dcousens]

@JedWatson this react should be a peerDependency in this case no?

[dandonahoe]

@RusAlex THANK YOU. I was going nuts, but that worked perfectly.

[scott-coates]

FYI This is a duplicate of #128.

I was running into this when using jspm. I noticed in my config that react-select was trying to depend on react@0.14.0-alpha3:

 "npm:react-select@0.4.9": {
      "classnames": "npm:classnames@2.1.2",
      "react": "npm:react@0.14.0-alpha3",
      "react-input-autosize": "npm:react-input-autosize@0.4.4"
    },

I currently have react@0.13.3 installed, so I just changed react-select's deps to 0.13.3.

[osiro]

Have you guys got this sorted out by removing react-select and react and reinstalling them as described by @RusAlex ?

I'm trying to investigate what's going on, but that workaround doesn't seem to work for me.

I'm running the latest versions of everything:

react: 0.13.3 react-select: 0.5.4

[nonken]

Same issue here, latest version of both

[JedWatson]

These issues may be related to the react-input-autosize dependency, which I've just published a new version of. Both it and react-select are now compatible with React 0.14 beta, but by default will install React 0.13. I've just published a new version of react-select and hopefully that will clear things up - let me know how you go.

[RusAlex]

I confirm. package version 0.5.6 works well

[sdeframond]

I am seeing this bug too. Here are my dependencies:

  "dependencies": {
      "babelify": "~6.1.2",
      "browserify": "~10.2.4",
      "browserify-incremental": "~3.0.1",
      "browserify-shim": "~3.8.7",
      "react": "^0.13.3",
      "react-redux": "^0.8.0",
      "react-select": "^0.6.1",
      "redux": "^1.0.0-rc"
    },

[alexclarkofficial]

I'm getting this as well. I tried the following to no avail.

rm -rf node_modules/react-select 
rm -rf node_modules/react
npm install react
npm install react-select@0.5.6

Please let me know if there is any other info that might be helpful.

[bruderstein]

It does sound like a two-copies-of-react issue. Can you (anyone with the issue) do a find node_modules -name ReactMount.js (assuming you're on unix/os x), and just check you only find one. Installing just react and react-select (even the older 0.5.6 version) doesn't cause this on it's own. [Edit: I mean isn't reproducible for me]

[alexclarkofficial]

@bruderstein Yes, I think you're onto something. I have one from React and one from Reactify.

Alexanders-Air:clipper-chrome alexanderclark$ find node_modules -name ReactMount.js
node_modules/react/lib/ReactMount.js
node_modules/reactify/node_modules/react-tools/src/browser/ui/ReactMount.js

How can I fix this?

[bruderstein]

The easy way, don't use reactify. You don't need it any more, you can use babelify instead (and you should, as that's what the react team uses too)

[bruderstein]

Would be good to hear the results from @sdeframond too, so that we can close this off.(Appreciate you're not using reactify, but it would still be good to check there's not an old copy of react lying in some nested node_modules somewhere).

[sdeframond]

Thank you all so much for your quick answers. It seems likely that I have a duplicate react too, coming from my rails setup.

Since I'm in Europe I will only be able to check this tomorrow. Sorry for the delay. Will let you know first thing in the morning!

On August 12, 2015 9:48:57 PM CEST, Dave Brotherstone notifications@github.com wrote:

Would be good to hear the results from @sdeframond too, so that we can close this off.(Appreciate you're not using reactify, but it would still be good to check there's not an old copy of react lying in some nested node_modules somewhere).

---

Reply to this email directly or view it on GitHub: https://github.com/JedWatson/react-select/issues/127#issuecomment-130424675

Sent from my Android device with K-9 Mail. Please excuse my brevity.

[bruderstein]

Awesome, thank you!

[alexclarkofficial]

No luck :( I ran:

Alexanders-Air:clipper-chrome alexanderclark$ npm install --save babelify
babelify@6.1.3 node_modules/babelify
├── object-assign@2.1.1
├── through2@0.6.5 (xtend@4.0.0, readable-stream@1.0.33)
└── babel-core@5.8.22 (slash@1.0.0, try-resolve@1.0.1, babel-plugin-remove-debugger@1.0.1, babel-plugin-remove-console@1.0.1, babel-plugin-property-literals@1.0.1, babel-plugin-inline-environment-variables@1.0.1, babel-plugin-eval@1.0.1, babel-plugin-jscript@1.0.4, babel-plugin-member-expression-literals@1.0.1, babel-plugin-undefined-to-void@1.1.6, babel-plugin-react-constant-elements@1.0.3, to-fast-properties@1.0.1, shebang-regex@1.0.0, trim-right@1.0.1, path-exists@1.0.0, babel-plugin-react-display-name@1.0.3, path-is-absolute@1.0.0, babel-plugin-constant-folding@1.0.1, fs-readdir-recursive@0.1.2, babel-plugin-proto-to-assign@1.0.4, babel-plugin-dead-code-elimination@1.0.2, babel-plugin-runtime@1.0.7, private@0.1.6, globals@6.4.1, esutils@2.0.2, convert-source-map@1.1.1, home-or-tmp@1.0.0, babel-plugin-undeclared-variables-check@1.0.2, js-tokens@1.0.1, line-numbers@0.2.0, debug@2.2.0, detect-indent@3.0.1, repeating@1.1.3, chalk@1.1.0, babylon@5.8.22, source-map@0.4.4, output-file-sync@1.1.1, resolve@1.1.6, minimatch@2.0.10, is-integer@1.0.4, bluebird@2.9.34, json5@0.4.0, source-map-support@0.2.10, regexpu@1.2.0, regenerator@0.8.35, lodash@3.10.1, core-js@1.0.1)
Alexanders-Air:clipper-chrome alexanderclark$ rm -rf node_modules/reactifiy

Then replaced reactify with babelify in the watch file, restarted the watcher, saved a file and reloaded the app. Was all of that correct?

[bruderstein]

Hmm... are you definitely clear of your two copies, have you checked the find again (just to be sure!)? If you've got sourcemaps setup, you can also check this from the browser - ctrl-O in chrome devtools, and search for ReactMount, if there's more than one, then you know you've got the issue.

Don't forget to npm uninstall --save reactify and ensure it's gone from your package.json too, just to save you headaches later. :smile:

[JedWatson]

I've seen the double-react issue happen when you are creating an external bundle with react in it, and also using react/addons. This happens specifically with browserify, may also be an issue with Webpack.

The workaround if that's relevant is to require both react and react/addons in your common bundle.

[alexclarkofficial]

Yeah the find only returns one. @JedWatson I don't think I'm doing either of those things. This is a chrome extension; not sure if that adds anything.

[bruderstein]

I really don't know anything about chrome extensions, so excuse my ignorance, and my i've-googled-it-so-it-must-be-right kinda suggestion, but could this have something to do with there being one react for the extension, and one on the page, or two extensions both using react? I don't know how they're sandboxed, and I guess it depends what sort of extension it is.

Can I also assume that the problem is still there if you remove react-select (ie. are we confident that react-select isn't the culprit here, and actually you're just being hit with the double-react issue?)

[alexclarkofficial]

@bruderstein I have no reason to believe that React is coming from anywhere but the extension. react-select is definitely the culprit. I can leave the import and just delete the Select element, I don't get the issue.

[bruderstein]

Ok, that's good to know. Is this by any chance an open project, so we can take a look, and try and reproduce it?

Could you try (if you haven't already), just using a <Select /> without any props, then try adding them back in slowly (probably options first, as the most likely candidate). If it's available, and you don't mind posting it into a gist or similar, a full stack trace / error would be really helpful.

Thanks for helping find this!

[alexclarkofficial]

Yep, running the empty Select still cause the error. It's definitely not open sourced, sorry (maybe I'll try to throw together a minimal project to showcase it).

Not sure how to get the call stack. Here is the console after the error: http://cl.ly/image/143P1L192G2K

[alexclarkofficial]

@bruderstein got one up! Sorry, I forgot to .gitignore the node_modules directory. https://github.com/alexclarkofficial/react-select-test

[bruderstein]

You're loading react.js from the react/dist folder, and then it's included in the bundle, presumably because react-select (like most components), uses react via a require('react') call.

I think you've got 2 options:

1. Change your components (in the example, home.jsx and client.jsx) to add a var React = require('react');, rather than using the global, and remove the extra script tag in the popup.html
2. Change your browserify config to stub out React, so that it doesn't get added to the bundle, but instead adds a shim to return the global. I'm not sure exactly of the config, but it's a pretty common thing I think, so should be easy to find.

I've done option 1, and the error goes away, and the app appears to work (not sure if does everything you expect, but it renders and I don't get errors).

[alexclarkofficial]

@bruderstein option one worked! Thank you so much for your help!

[bruderstein]

Perfect! I can't wait for 0.14 to become mainstream, which has a warning for this!

[sdeframond]

Hi there,

I just wanted to confirm I have to copies of React.

Thanks a lot!

[bsr203]

I too had this error when react-select is installed globally. Though I had a react version 0.13.3 installed globally prior to install react-select, when install react-select, it installs react (which is a peer dependency) along with other two dependencies listed in package.json. This peerdependency doesn't get installed if not installed globally. !! so the solution was not to use the global version.