React-select: RollUp JS: TypeError: Cannot read property 'inputValue' of undefined

[blacksmoke26]

package.json
```...
"react-select": "^2.4.1",

File `CountryPicker.js`:
```js
import React, { Component } from 'react';
import Select from 'react-select';

const options: Object = [
   {value: 'chocolate', label: 'Chocolate'},
   {value: 'strawberry', label: 'Strawberry'},
   {value: 'vanilla', label: 'Vanilla'}
];

class CountryPicker extends Component {
   render () {
     return (
       <Select options={options} inputValue={'strawberry'}/>
     );
   }
}

Usage:

class App extends React.Component {
   render () {
       return <CountryPicker/>;
   }
}

// Always starts once doom
document.addEventListener('DOMContentLoaded', () => {
   /** @type {HTMLDivElement} */
   let elm = document.querySelector('div#root');

   // noinspection ES6ModulesDependencies
   ReactDOM.render(<App />, elm);
});

And the rest:

TypeError: Cannot read property 'inputValue' of undefined
    at new StateManager (react-select.esm.js:4559)
    at Yf (react-dom.production.min.js:67)
    at qg (react-dom.production.min.js:92)
    at hi (react-dom.production.min.js:104)
    at Qg (react-dom.production.min.js:144)
    at Rg (react-dom.production.min.js:145)
    at Sc (react-dom.production.min.js:158)
    at Z (react-dom.production.min.js:156)
    at Kc (react-dom.production.min.js:155)
    at ya (react-dom.production.min.js:153)

[Rall3n]

@blacksmoke26 Would you mind providing an example of your issue by forking the following CodeSandbox example?

[blacksmoke26]

Actually I am using Rollup bundler. So I can't use with that. with Webpack things are OK!

[Rall3n]

@blacksmoke26 Have you tried setting inputValue without the brackets, like:

<Select
    { ... }
    inputValue='strawberry'
/>

[blacksmoke26]

@Rall3n Thanks for your attention, I have switched from Rollup to Webpack. Things are fine now.

[blacksmoke26]

If you want, I can attach RollupJS files to reproduce that error. What do you say?

[Rall3n]

@blacksmoke26 For future RollupJS users it would be of high importance to solve this issue. It would be of great help if you could attach those files or even better create a repository with the RollupJS setup that you used.

[blacksmoke26]

This walkthrough involves the following libs:

• rollup
• react
• gulp
• babel

Finally reproduced:

TypeError: Cannot read property 'inputValue' of undefined
    at new StateManager (bundle.js:9523)
    at Yf (react-dom.production.min.js:67)
    at qg (react-dom.production.min.js:92)
    at hi (react-dom.production.min.js:104)
    at Qg (react-dom.production.min.js:144)
    at Rg (react-dom.production.min.js:145)
    at Sc (react-dom.production.min.js:158)
    at Z (react-dom.production.min.js:156)
    at Kc (react-dom.production.min.js:155)
    at ya (react-dom.production.min.js:153)

Note: I assume that you have installed gulp globally.

Steps to reproduce:

• Please extract the react-select-error-reproduce.zip file somewhere.
• Run npm install to install packages.
• Run npm run rollup or gulp rollup/build to compile from source.
• Open build/index.html in a browser (localhost in case)
• Check the console for more errors

You can skip above and download the following zip file (contains compiled version) to test:
build-files.zip

P.S. Please let me know if you need more details.

[boomdrak]

I had the same error, and am using Webpack.

TypeError: Cannot read property 'inputValue' of undefined at new StateManager (react-select.esm.js:4559) at Yf (react-dom.production.min.js:67) at qg (react-dom.production.min.js:92) at hi (react-dom.production.min.js:104) at Qg (react-dom.production.min.js:144) at Rg (react-dom.production.min.js:145) at Sc (react-dom.production.min.js:158) at Z (react-dom.production.min.js:156) at Kc (react-dom.production.min.js:155) at ya (react-dom.production.min.js:153)

Solved the issue with installing "memoize-one": "^5.1.1",

Current Webpack packages:
"webpack": "4.41.0",
"webpack-cli": "^3.3.7",
"webpack-dev-server": "^3.8.0"
"react": "^16.10.1",

[jportella93]

Having the same problem with Webpack

Uncaught TypeError: Cannot read property 'inputValue' of undefined
    at Select-9fdb8cd0.browser.esm.js:1805
    at isNewArgEqualToLast (memoize-one.esm.js:16)
    at Array.every (<anonymous>)
    at Select.result (memoize-one.esm.js:24)
    at Select.UNSAFE_componentWillReceiveProps (Select-9fdb8cd0.browser.esm.js:1845)
    at Select.UNSAFE_componentWillReceiveProps (react-hot-loader.development.js:714)
    at callComponentWillReceiveProps (react-dom.development.js:14280)
    at updateClassInstance (react-dom.development.js:14493)
    at updateClassComponent (react-dom.development.js:18400)
    at beginWork$1 (react-dom.development.js:20160)

    "react-select": "^3.1.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0",
    "webpack-merge": "^4.2.2",

Woud prefer to fix it without installing an additional package as @boomdrak did, any clue?

[jportella93]

I've solved by downgrading from 3.1.0 to 3.0.8

[boomdrak]

Confirming that option from @jportella93 where downgrading react-select 3 to version 3.0.8 resloves the issue without having to install memoize-one

[markwoon]

Confirming that this is not just a rollup problem. This happens in webpack as well, and downgrading to 3.0.8 fixes the problem.

I'm using yarn, and when doing a fresh yarn install I get this problem. When using an old yarn.lock and updating, this problem does not always occur, so I'm guessing this is cause by some weird combination of packages...