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

[dylanfpaul]

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"
  }