JedWatson / JedWatson/react-select

Uncaught TypeError: Cannot read properties of null (reading 'prevProps')

Open
#5,362 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

issue/bug-unconfirmed
Dominant language
TypeScript
Stars
28k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

I am trying to get react-select v5.4.0 work in my app. I am running React v16.9.0. I can't seem to get the component to render at the root of my app (I am rendering at the root just to experiment and see if I can even use react-select v5.4.0).

I get this error trying to render the component (sorry my formatting for this github issue seems to not be working): Uncaught TypeError: Cannot read properties of null (reading 'prevProps') at getDerivedStateFromProps (Select-54ac8379.esm.js:2690:1) at applyDerivedStateFromProps (react-dom.development.js:13063:1) at mountClassInstance (react-dom.development.js:13455:1) at updateClassComponent (react-dom.development.js:16983:1) at beginWork$1 (react-dom.development.js:18502:1) at HTMLUnknownElement.callCallback (react-dom.development.js:348:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:398:1) at invokeGuardedCallback (react-dom.development.js:455:1) at beginWork$$1 (react-dom.development.js:23214:1) at performUnitOfWork (react-dom.development.js:22205:1) Here is the code that is trying to render the actual component:

import React from 'react';
import ReactDOM from 'react-dom';
import Select from 'react-select';

const rootEl = document.getElementById('root');

const dogOptions = [
   { id: 1, label: 'Chihuahua' },
   { id: 2, label: 'Bulldog' },
   { id: 3, label: 'Dachshund' },
   { id: 4, label: 'Akita' }
];

class Component extends React.Component {
   render() {
      return <Select
         defaultValue={dogOptions[0]}
         isClearable
         isSearchable
         name="dog"
         options={dogOptions}
         getOptionValue={(option) => `${option['id']}`}
      />;
   }
}

function App() {
   return <Component />;
}

ReactDOM.render(<App />, rootEl);

I am trying to figure out if this is an issue with react-select or my environment / adjacent packages.

Here is a snippet of my package-json in case someone can spot a troublesome peer dependency. I don't believe I have any incompatible peer dependencies though...

"dependencies": {
    "@hot-loader/react-dom": "~16.9.0",
    "active-event-stack": "1.0.0",
    "autolinker": "3.0.5",
    "bowser": "1.7.1",
    "chart.js": "~2.8.0",
    "classnames": "2.2.5",
    "color": "^3.0.0",
    "core-js": "~3.2.1",
    "file-saver": "2.0.2",
    "hammerjs": "~2.0.8",
    "history": "~4.9.0",
    "html-to-react": "~1.3.4",
    "i18next": "~17.0.12",
    "i18next-xhr-backend": "~3.1.2",
    "inline-style-prefixer": "~4.0.2",
    "jquery": "3.6.0",
    "keycode": "2.1.9",
    "lodash": "4.17.4",
    "masonry-layout": "4.2.0",
    "modernizr": "3.5.0",
    "moment": "2.18.1",
    "moment-timezone": "0.5.13",
    "normalizr": "3.2.3",
    "pdfjs-dist": "1.9.426",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-google-recaptcha": "^2.1.0",
    "react-i18next": "~10.12.2",
    "react-idle-timer": "~4.2.12",
    "react-input-autosize": "~2.2.1",
    "react-redux": "~7.1.1",
    "react-router": "~5.0.1",
    "react-router-dom": "~5.0.1",
    "react-scrollchor": "~6.0.0",
    "react-select": "^5.4.0",
    "react-signature-canvas": "^1.0.3",
    "react-tether": "~2.0.3",
    "react-transition-group": "~4.2.2",
    "react-virtualized": "~9.21.1",
    "redux": "~4.0.4",
    "redux-form": "~8.2.6",
    "redux-thunk": "~2.3.0",
    "regenerator-runtime": "^0.13.9",
    "reselect": "3.0.1",
    "superagent": "3.5.2",
    "tinymce": "^5.10.2",
    "underscore.string": "3.3.4"
  },
  "devDependencies": {
    "@babel/core": "~7.5.5",
    "@babel/preset-env": "~7.5.5",
    "@babel/preset-react": "~7.0.0",
    "acorn": "~7.0.0",
    "ajv": "~6.10.2",
    "autoprefixer": "7.1.2",
    "babel-eslint": "~10.0.3",
    "babel-loader": "~8.0.6",
    "copy-webpack-plugin": "~5.0.4",
    "css-loader": "~3.2.0",
    "enhanced-resolve": "~3.4.1",
    "enzyme": "~3.10.0",
    "enzyme-adapter-react-16": "~1.14.0",
    "eslint": "~6.2.2",
    "eslint-loader": "~3.0.0",
    "eslint-plugin-babel": "~5.3.0",
    "eslint-plugin-react": "~7.14.3",
    "eslint-plugin-react-hooks": "~2.0.1",
    "exports-loader": "0.7.0",
    "file-loader": "~4.2.0",
    "html-webpack-plugin": "~3.2.0",
    "imports-loader": "0.7.1",
    "jest": "~24.9.0",
    "json-loader": "~0.5.7",
    "mini-css-extract-plugin": "~0.8.0",
    "modernizr-loader": "1.0.1",
    "nock": "~11.3.3",
    "node-sass": "~4.12.0",
    "optimize-css-assets-webpack-plugin": "~5.0.3",
    "postcss-loader": "~3.0.0",
    "prop-types": "15.5.10",
    "react-hot-loader": "~4.12.13",
    "react-test-renderer": "~16.9.0",
    "redux-logger": "3.0.6",
    "redux-mock-store": "1.2.3",
    "sass-loader": "~8.0.0",
    "style-loader": "~1.0.0",
    "url-loader": "~2.1.0",
    "webpack": "~4.39.3",
    "webpack-cli": "~3.3.7",
    "webpack-dev-server": "~3.8.0"
  }

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the provided example with React 16.9.0 and react-select 5.4.0, then inspect getDerivedStateFromProps in the bundled Select-54ac8379.esm.js where the stack trace fails. Done means the component renders at the application root without this exception and the failure is covered by a regression test.

Written by the indexing model from the issue text.

Assessment

Tech stack
react
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.