Develop Reference

undefined is not an object (evaluating 'Component.propTypes') - React Native 0.61.5

I have upgraded the existing react native project from react native 0.59.6 to 0.61.5.
react-native upgrade command not working. So I have done the manual upgrade using upgrade helper. Resolved some post issues. Now project build success.
But After rendering into the ios emulator from Xcode, it is giving the following error.
I am not using Component.propTypes anywhere. package.lock.json have some packages with prop-types. I am not sure what it is doing exactly. Otherwise, inside my project, I am not using
prop-types also. Please find my package.lock.json below,
package.lock.json
...
...
...
"prop-types": {
"version": "15.7.2",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
"integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
"requires": {
"loose-envify": "^1.4.0",
"object-assign": "^4.1.1",
"react-is": "^16.8.1"
}
},
....
"react": {
"version": "16.9.0",
"resolved": "https://registry.npmjs.org/react/-/react-16.9.0.tgz",
"integrity": "sha512-+7LQnFBwkiw+BobzOF6N//BdoNw0ouwmSJTEm9cglOOmsg/TMiFHZLe2sEoN5M7LgJTj9oHH0gxklfnQe66S1w==",
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1",
"prop-types": "^15.6.2"
}
},
....
package.json
{
"name": "wasfat",
"version": "1.0.3",
"private": true,
"rnpm": {
"assets": [
"app/assets/fonts/corbel"
]
},
"scripts": {
"prepare-repository": "npm i -g react-native-cli yarn;yarn install; react- native link",
"emulator": "emulator -avd Nexus5V6L23_x86_64 -scale 1.0",
"clean": "watchman watch-del-all && npm cache clean && cd android && ./gradlew clean && cd ..",
"test": "jest",
"postinstall": "rm -rf node_modules/react-native-twitter-signin/node_modules",
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"lint": "eslint ."
},
"dependencies": {
"jetifier": "^1.6.5",
"react": "16.9.0",
"react-native": "^0.61.5",
"react-native-actionsheet": "^2.4.2",
"react-native-android-keyboard-adjust": "^1.2.0",
"react-native-aws3": "0.0.8",
"react-native-deep-linking": "^2.2.0",
"react-native-device-info": "^5.3.1",
"react-native-double-tap": "^1.0.1",
"react-native-drawer": "^2.5.1",
"react-native-elements": "^1.0.0",
"react-native-exception-handler": "^2.10.8",
"react-native-fbsdk": "^1.1.0",
"react-native-firebase": "^5.5.6",
"react-native-gesture-handler": "^1.1.0",
"react-native-google-signin": "^1.2.3",
"react-native-hide-with-keyboard": "^1.2.0",
"react-native-image-crop-picker": "^0.25.3",
"react-native-image-picker": "^0.28.1",
"react-native-image-slider": "^2.0.3",
"react-native-image-view": "^2.1.5",
"react-native-keyboard-avoiding-view": "^1.0.0",
"react-native-keyboard-aware-scroll-view": "^0.8.0",
"react-native-keyboard-aware-scrollview": "^2.0.0",
"react-native-keyboard-aware-view": "0.0.14",
"react-native-keyboard-listener": "^1.1.0",
"react-native-modal": "^11.1.0",
"react-native-paper": "^2.15.0",
"react-native-picker-select": "^6.2.0",
"react-native-popup-menu": "^0.15.6",
"react-native-progress": "^3.6.0",
"react-native-read-more-text": "^1.1.0",
"react-native-responsive-image": "^2.3.1",
"react-native-responsive-screen": "^1.2.1",
"react-native-s3-upload": "0.0.12",
"react-native-share": "^1.2.1",
"react-native-side-drawer": "^1.1.9",
"react-native-side-menu": "^1.1.3",
"react-native-simple-toast": "0.0.8",
"react-native-snap-carousel": "^3.8.0",
"react-native-swiper-flatlist": "^1.0.10",
"react-native-twitter-signin": "^1.1.1",
"react-native-vector-icons": "^6.6.0",
"react-native-video": "^4.4.4",
"react-native-video-controls": "^2.2.3",
"react-native-video-player": "^0.10.0",
"react-native-view-more-text": "^2.1.0",
"react-navigation": "^3.3.0",
"react-redux": "^7.1.0",
"react-spinkit": "^3.0.0",
"redux": "^4.0.4"
},
"devDependencies": {
"#babel/core": "^7.6.2",
"#babel/runtime": "^7.6.2",
"#react-native-community/eslint-config": "^0.0.5",
"babel-jest": "^24.9.0",
"eslint": "^6.5.1",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.56.0",
"react-test-renderer": "16.9.0"
},
"jest": {
"preset": "react-native"
}
}
I have found this https://reactjs.org/warnings/dont-call-proptypes.html regarding this issue. But I am not sure how to use it. Because according to this. some third party libraries using propTypes directly. But how to handle it?
There is no help in 0.61 version Github issues. Please suggest some workarounds for this issue.
Thanks for any help.

React scripts issue: loop loading chunk.js

I'm using React scripts v3. I have this issue whenever I do an action of in the page ( mouse event, forms...) the application keeps downloading chunk.js
This my package.json
{
"version": "0.1.0",
"private": true,
"dependencies": {
"babel-polyfill": "^6.26.0",
"bootstrap": "^4.3.1",
"cors": "^2.8.5",
"lodash.flatten": "^4.4.0",
"lodash.get": "^4.4.2",
"lodash.intersection": "^4.4.0",
"mockdate": "^2.0.2",
"moment": "^2.24.0",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-app-polyfill": "^1.0.1",
"react-dom": "^16.8.6",
"react-router": "4.3.1",
"react-router-dom": "4.3.1",
"react-scripts": "^3.0.1",
"recompose": "^0.30.0",
"url-search-params-polyfill": "^6.0.0",
"uuid": "^3.3.2"
},
"scripts": {
"mocks": "cd mocks && npm start",
"start-dotnet": "react-scripts start",
"start": "concurrently \"npm run mocks\" \"react-scripts start\"",
"build": "react-scripts build",
"test": "set NODE_ICU_DATA=node_modules/full-icu&& react-scripts test --env=jsdom",
"test:staged": "npm run test -- --coverage --findRelatedTests --watchAll=false",
"test-coverage": "npm run test -- --coverage --watchAll=false"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
},
"lint-staged": {
"*src/**/*.js": [
"prettier --write",
"npm run test:coverage",
"git add"
]
},
"commitlint": {
"extends": [
"#commitlint/config-conventional"
]
},
"eslintConfig": {
"extends": "react-app"
},
"jest": {
"snapshotSerializers": [
"enzyme-to-json/serializer"
]
},
"browserslist": [
">0.2%",
"ie 11",
"not dead",
"not op_mini all"
],
"devDependencies": {
"#commitlint/cli": "^8.0.0",
"#commitlint/config-conventional": "^8.0.0",
"concurrently": "^4.1.0",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.12.1",
"enzyme-to-json": "^3.3.5",
"eslint-plugin-react-hooks": "^1.6.0",
"full-icu": "^1.3.0",
"husky": "^2.4.1",
"jest": "^24.7.1",
"jest-cucumber": "^2.0.11",
"lint-staged": "^8.2.1",
"node-sass": "^4.11.0",
"prettier": "^1.18.2"
}
}
Does anyone have an idea about this issue?

I ran into the same issue, where it kept on requesting for chunk.
It happened because there was a reference issue inside my JS chunk that I was lazy loading.
So I was lazy loading page data, and inside the JS for that, I was doing an import to a file that did not exists. And that lead to this issue.
Fixing that fixed it for me.

I ran into this problem today. I had incorrectly set the onChange action to a string instead of a function, so changing it to a function worked for me.

Material UI Picker - date-fns issue

I am using material UI in my react application and I am having difficulty getting the material-ui-pickers example to work.
Here is the online example from Material UI.
https://codesandbox.io/s/52p74362pl
The error that i am getting is:
index.js:1446 ../node_modules/#date-io/date-fns/build/index.esm.js Module not found: `Can't resolve 'date-fns/addDays' in 'C:\Project4\CDE\IFS.CDE.Web\node_modules\#date-io\date-fns\build'`
here are my package.json files
{
"name": "IFS.CDE.Web",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^3.7.1",
"#material-ui/icons": "^3.0.1",
"ajv": "^6.5.2",
"autosuggest-highlight": "^3.1.1",
"axios": "^0.18.0",
"classnames": "^2.2.5",
"connected-react-router": "6.1.0",
"date-fns": "^1.30.1",
"downshift": "^2.0.10",
"extract-svg-path": "^2.1.0",
"file-saver": "^1.3.8",
"install": "^0.12.1",
"lodash": "^4.17.10",
"material-ui-datetimepicker": "^1.0.7",
"material-ui-image": "^3.0.3",
"material-ui-pickers": "^2.1.1",
"moment": "^2.23.0",
"npm": "^6.5.0",
"parse-svg-path": "^0.1.2",
"prop-types": "^15.6.2",
"rc-progress": "^2.2.6",
"react": "^16.6.3",
"react-autosuggest": "^9.3.4",
"react-bingmaps": "^3.6.1",
"react-color": "^2.14.1",
"react-dnd": "^7.0.2",
"react-dom": "^16.6.3",
"react-dropzone": "^4.3.0",
"react-file-viewer": "^0.5.0",
"react-iframe": "^1.2.0",
"react-loadable": "^5.5.0",
"react-popper": "^0.10.1",
"react-redux": "^6.0.0",
"react-render-html": "^0.6.0",
"react-router-dom": "^4.3.1",
"react-scripts": "^2.1.2",
"react-select": "^2.0.0",
"redux": "^4.0.1",
"redux-persist": "^5.10.0",
"redux-thunk": "^2.3.0",
"rimraf": "^2.6.2",
"typeface-roboto": "^0.0.54",
"uuid": "^3.3.2",
"video-react": "^0.13.1"
},
"scripts": {
"start": "rimraf ./build && react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"set-env": "set NODE_ENV=production"
},
"devDependencies": {},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
I have installed date-fns but i still get the error.
https://www.npmjs.com/package/date-fns.
I also deleted all the node module and did a npm install to see if that would solve the issue but it did not.
Thanks for the help.

install this(see here):
npm i --save date-fns#next #date-io/date-fns

Try using date-fns 2.0.0. I had the same issue and fixed by updating the lib. Hope it works.

Mocha: TypeError: Converting circular structure to JSON

Mocha suddenly is throwing
TypeError: Converting circular structure to JSON
I have done a new setup for executing the test cases.
The test cases were running fine till yesterday.
I am using: Mocha, Chai, Sinon, Enzyme
This is my package.json:
{
"name": "abc",
"version": "1.0.0",
"description": "desc",
"scripts": {
"build": "webpack --config webpack-client.config.js",
"devbuild": "webpack --config webpack-client-dev.config.js",
"test": "mocha --compilers js:babel-register --require ./test/dom.js --require ./test/helpers.js --recursive",
"tdd": "npm test -- --watch",
"coverage": "nyc --reporter=html --reporter=text npm test"
},
"repository": {
"type": "git",
"url": ""
},
"author": "author",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-es2015": "^6.24.1",
"chai": "^4.0.2",
"compression-webpack-plugin": "^0.3.2",
"coveralls": "^2.13.1",
"enzyme": "^2.9.0",
"istanbul": "^0.4.5",
"jquery": "^3.2.1",
"jsdom": "11.0.0",
"jsdom-global": "3.0.2",
"mocha": "3.2.0",
"nyc": "^11.0.3",
"react-addons-test-utils": "^15.6.0",
"sinon": "^2.3.5",
"webpack": "^1.12.2",
"webpack-bundle-analyzer": "^2.3.1"
},
"dependencies": {
"exenv": "^1.2.1",
"expose-loader": "^0.7.0",
"flux": "2.0.1",
"html-webpack-plugin": "^2.28.0",
"htmlescape": "1.0.0",
"intl": "^1.2.5",
"intl-locales-supported": "^1.0.0",
"keymirror": "^0.1.1",
"morgan": "1.5.2",
"object-assign": "^4.1.1",
"prop-types": "^15.5.4",
"react": "^15.4.2",
"react-bootstrap": "^0.31.0",
"react-dom": "^15.4.2",
"react-intl": "^2.0.0-beta-2",
"react-toastr": "^2.8.2",
"zxcvbn": "^4.4.2"
}
}
Please find the error thrown on the console :
Please help.
Thank you

I ran into this. Based on googling around, there seem to be many different causes for this. Here's my situation: I'm using mocha with chai and ts-node/register to run TypeScript test files directly (without needing to transpile them myself).
My solution was this:
Add import {describe, it} from 'mocha'; at the top of my TS test files.
I've never had to do this before and I have no idea why I suddenly need to add them now. But it is what it is.

babel-runtime missing interop-require-default

No idea how to go about fixing this error. Did some google searching and followed what people recommended. Even removed node_modules and reinstalled but nothing works
I am getting this error:
Error: Cannot find module 'babel-runtime/helpers/interop-require-default' (While processing preset: "/Users/bli1/Development/node_modules/babel-preset-es2015/index.js")
package.json:
{
"name": "braddy",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "npm-run-all --parallel testApp:watch testServer:watch open:src lint:watch",
"open:src": "babel server/server.js",
"testApp": "mocha --reporter nyan tests/testSetup.js \"app/**/*.test.js\"",
"testApp:watch": "npm run testApp -- --watch",
"testServer": "mocha --reporter progress tests/testSetup.js \"server/**/*.test.js\"",
"testServer:watch": "npm run testServer -- --watch",
"lint": "node_modules/.bin/esw webpack.config.* app server tests",
"lint:watch": "npm run lint -- --watch"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel": "^6.5.2",
"babel-cli": "^6.18.0",
"babel-core": "^6.18.2",
"babel-loader": "^6.2.8",
"babel-register": "^6.18.0",
"babel-runtime": "^6.18.0",
"express": "^4.14.0",
"jquery": "^3.1.1",
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-router": "^3.0.0",
"redux": "^3.6.0",
"redux-thunk": "^2.1.0"
},
"devDependencies": {
"babel-preset-react": "^6.16.0",
"babel-runtime": "^6.18.0",
"cheerio": "^0.22.0",
"eslint": "^3.11.1",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-react": "^6.8.0",
"eslint-watch": "^2.1.14",
"eventsource-polyfill": "^0.9.6",
"extract-text-webpack-plugin": "^1.0.1",
"jsdom": "^9.8.3",
"loglevel": "^1.4.1",
"mocha": "^3.2.0",
"npm-run-all": "^3.1.2",
"open": "0.0.5",
"react-hot-loader": "^1.3.1",
"webpack": "^1.13.3",
"webpack-dev-middleware": "^1.8.4",
"webpack-dev-server": "^1.16.2",
"webpack-hot-middleware": "^2.13.2"
}
}

The plugin babel-preset-es2015 is missing in your package.json, and not installed when you do npm install. Add it, and install again.