I'm getting this error after upgrading react, redux versions

Question

I've updated react versions. And jumping from react-router-redux to connected-react-router. Providing package.json file below. mostly it's happening after upgraded react latets version. So getting following error.

index.js:31 Uncaught TypeError: Cannot read property 'string' of undefined
    at Object.<anonymous> (index.js:31)
    at __webpack_require__ (bootstrap 57766baaa3c8c796877e:555)
    at fn (bootstrap 57766baaa3c8c796877e:86)
    at Object.<anonymous> (Deposit.jsx:15)
    at __webpack_require__ (bootstrap 57766baaa3c8c796877e:555)
    at fn (bootstrap 57766baaa3c8c796877e:86)
    at Object.<anonymous> (MyAccount.jsx:41)
    at __webpack_require__ (bootstrap 57766baaa3c8c796877e:555)
    at fn (bootstrap 57766baaa3c8c796877e:86)
    at Object.<anonymous> (index.js:1)
(anonymous) @ index.js:31
__webpack_require__ @ bootstrap 57766baaa3c8c796877e:555
fn @ bootstrap 57766baaa3c8c796877e:86
(anonymous) @ Deposit.jsx:15
__webpack_require__ @ bootstrap 57766baaa3c8c796877e:555
fn @ bootstrap 57766baaa3c8c796877e:86
(anonymous) @ MyAccount.jsx:41
__webpack_require__ @ bootstrap 57766baaa3c8c796877e:555
fn @ bootstrap 57766baaa3c8c796877e:86
(anonymous) @ index.js:1
__webpack_require__ @ bootstrap 57766baaa3c8c796877e:555
fn @ bootstrap 57766baaa3c8c796877e:86
(anonymous) @ index.js:12
__webpack_require__ @ bootstrap 57766baaa3c8c796877e:555
fn @ bootstrap 57766baaa3c8c796877e:86
(anonymous) @ bootstrap 57766baaa3c8c796877e:578
__webpack_require__ @ bootstrap 57766baaa3c8c796877e:555
(anonymous) @ bootstrap 57766baaa3c8c796877e:578
(anonymous) @ bootstrap 57766baaa3c8c796877e:578

package.json

"@commitlint/cli": "^7.6.1",
"@commitlint/config-conventional": "^7.6.0",
"antd": "^4.15.5",
"autoprefixer": "6.7.2",
"babel-core": "6.22.1",
"babel-eslint": "^7.2.3",
"babel-jest": "18.0.0",
"babel-loader": "6.2.10",
"babel-plugin-import": "^1.13.3",
"babel-preset-react-app": "~2.1.0",
"babel-runtime": "~6.20.0",
"case-sensitive-paths-webpack-plugin": "1.1.4",
"chai": "^4.3.4",
"chalk": "1.1.3",
"commitizen": "^3.1.2",
"connect-history-api-fallback": "1.3.0",
"copy-to-clipboard": "~3.0.5",
"cross-spawn": "4.0.2",
"css-loader": "0.26.1",
"cz-conventional-changelog": "^2.1.0",
"dateformat": "~2.0.0",
"detect-port": "1.0.1",
"dotenv": "2.0.0",
"electron": "^2.0.2",
"electron-builder": "20.2.0",
"enzyme": "~2.7.1",
"eslint": "^5.2.0",
"eslint-config-react-app": "^0.5.2",
"eslint-loader": "1.6.0",
"eslint-plugin-flowtype": "^2.21.0",
"eslint-plugin-import": "2.0.1",
"eslint-plugin-jsx-a11y": "2.2.3",
"eslint-plugin-prettier": "^2.7.0",
"eslint-plugin-react": "6.4.1",
"eslint-plugin-react-hooks": "^1.6.0",
"excel-export": "~0.5.1",
"extract-text-webpack-plugin": "1.0.1",
"file-loader": "0.10.0",
"filesize": "3.3.0",
"foreman": "~2.0.0",
"fs": "0.0.1-security",
"fs-extra": "0.30.0",
"gzip-size": "3.0.0",
"html-webpack-plugin": "2.24.0",
"http-proxy-middleware": "0.17.3",
"husky": "^1.3.1",
"immutable": "~3.8.1",
"jest": "18.1.0",
"jsdom": "~9.11.0",
"json-loader": "0.5.4",
"less": "^2.7.2",
"less-loader": "~2.2.3",
"lint-staged": "^8.2.1",
"localforage": "~1.5.0",
"lodash": "^4.17.21",
"loglevel": "~1.4.1",
"moment": "~2.17.1",
"numeral": "~2.0.4",
"object-assign": "4.1.1",
"peerplaysjs-lib": "^0.6.0",
"perfect-scrollbar": "~0.6.11",
"postcss-loader": "1.2.2",
"prettier": "^1.19.1",
"promise": "7.1.1",
"promise-queue": "~2.2.3",
"prop-types": "^15.5.10",
"qrcode.react": "~0.6.1",
"randomstring": "~1.1.5",
"rc": "^1.2.8",
"react": "^17.0.2",
"react-addons-test-utils": "^15.6.0",
"react-dev-utils": "^0.5.0",
"react-dom": "^17.0.2",
"react-infinity-menu": "~3.2.0",
"react-modal": "^2.2.4",
"react-redux": "^7.2.4",
"react-redux-i18n": "^1.9.3",
"react-router": "^5.2.0",
"react-router-redux": "^4.0.8",
"react-scripts": "0.8.5",
"react-scroll": "^1.8.2",
"react-select": "~1.0.0-rc.3",
"react-split-pane": "0.1.63",
"react-table": "~5.5.0",
"react-test-renderer": "~15.4.2",
"recursive-readdir": "2.1.0",
"redux": "^4.1.0",
"redux-devtools-extension": "^2.13.9",
"redux-form": "^8.3.7",
"redux-immutable": "~4.0.0",
"redux-mock-store": "^1.5.4",
"redux-persist": "~4.4.2",
"redux-persist-immutable": "~4.2.0",
"redux-thunk": "^2.3.0",
"reselect": "~3.0.0",
"rxjs": "^5.4.2",
"sinon": "^3.2.1",
"standard-version": "^5.0.2",
"strip-ansi": "3.0.1",
"style-loader": "0.13.1",
"stylelint": "^10.1.0",
"stylelint-order": "^3.1.1",
"url-loader": "0.5.7",
"webpack": "1.14.0",
"webpack-dev-server": "1.16.2",
"webpack-manifest-plugin": "1.1.0",
"whatwg-fetch": "2.0.2"

}, "dependencies": { "connected-react-router": "^6.9.1", "electron-is-dev": "0.3.0", "history": "^5.0.0" },

How to fix this?

Answer 1

SOURCE: https://stackoverflow.com/a/57640005/14106548

Based on a ReactJS documentation/tutorial page, Type Checking with PropTypes, it looks like you are attempting to access PropTypes using the old approach.

That is the first error, but you need to change also the others

Try using this instead:

import PropTypes from 'prop-types';

propTypes: {
    content: PropTypes.string.isRequired
    //Add the remaining ones
};