getting warnings in browser console

[mehmoodahmed]

Hi,
thank you for this sample.

my package.json i:

{ "name": "clientapp", "version": "0.1.0", "private": true, "dependencies": { "axios": "^0.19.0", "babel-polyfill": "^6.26.0", "bootstrap": "^4.3.1", "concurrently": "^4.1.2", "connected-react-router": "^6.5.2", "cors": "^2.8.5", "express": "^4.17.1", "history": "^4.9.0", "react": "^16.9.0", "react-dom": "^16.9.0", "react-redux": "^7.1.0", "react-router": "^5.0.1", "react-router-dom": "^5.0.1", "react-scripts": "3.1.1", "reactstrap": "^8.0.1", "redux": "^4.0.4", "redux-thunk": "^2.3.0" }, "scripts": { "start": "concurrently \"npm run server\" \"react-scripts start\"", "server": "nodemon server/app", "wdio": "wdio", "build": "react-scripts build", "test": "react-scripts test", "test:coverage": "npm run test -- --coverage", "format": "prettier --write \"**/*.+(js|json|css)\"", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "jest": { "collectCoverageFrom": [ "src/**/*.{js,jsx}", "!/node_modules/", "!src/index.js", "!src/Root.js" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not ie <= 11", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "moxios": "^0.4.0", "chai": "^4.2.0", "enzyme": "^3.7.0", "enzyme-adapter-react-16": "^1.7.0", "enzyme-to-json": "^3.3.4", "fetch-mock": "^7.2.5", "firebase-tools": "^6.2.2", "node-sass": "^4.10.0", "nodemon": "^1.18.6", "prop-types": "^15.6.2", "react-test-renderer": "^16.6.3", "redux-mock-store": "^1.5.3", "sinon": "^7.1.1", "wdio-mocha-framework": "^0.6.4", "wdio-selenium-standalone-service": "0.0.12", "wdio-spec-reporter": "^0.1.5", "webdriverio": "^4.14.1" }, "keywords": [], "description": "Shopping cart" }

i am getting these warnings in my browser console.

react-dom.development.js:12029 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

• Move data fetching code or side effects to componentDidUpdate.
• If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
• Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: FloatCart, Shelf
printWarning @ react-dom.development.js:12029
webpackHotDevClient.js:120 ./node_modules/process/browser.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:

• z:\react-shopping-cart\ShoppingCart\ShoppingCart\clientapp\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!z:\react-shopping-cart\ShoppingCart\ShoppingCart\ClientApp\node_modules\process\browser.js
  Used by 1 module(s), i. e.
  z:\react-shopping-cart\ShoppingCart\ShoppingCart\clientapp\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!z:\react-shopping-cart\ShoppingCart\ShoppingCart\ClientApp\node_modules\axios\lib\defaults.js
• z:\react-shopping-cart\ShoppingCart\ShoppingCart\clientapp\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!z:\react-shopping-cart\ShoppingCart\ShoppingCart\clientapp\node_modules\process\browser.js
  Used by 3 module(s), i. e.
  z:\react-shopping-cart\ShoppingCart\ShoppingCart\clientapp\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!z:\react-shopping-cart\ShoppingCart\ShoppingCart\clientapp\node_modules\chalk\index.js
  printWarnings @ webpackHotDevClient.js:120
  webpackHotDevClient.js:120 ./node_modules/webpack/buildin/global.js
  There are multiple modules with names that only differ in casing.
  This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
  Use equal casing. Compare these module identifiers:
• z:\react-shopping-cart\ShoppingCart\ShoppingCart\clientapp\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!z:\react-shopping-cart\ShoppingCart\ShoppingCart\ClientApp\node_modules\webpack\buildin\global.js
  Used by 2 module(s), i. e.
  z:\react-shopping-cart\ShoppingCart\ShoppingCart\clientapp\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!z:\react-shopping-cart\ShoppingCart\ShoppingCart\ClientApp\node_modules\babel-polyfill\lib\index.js
• z:\react-shopping-cart\ShoppingCart\ShoppingCart\clientapp\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!z:\react-shopping-cart\ShoppingCart\ShoppingCart\clientapp\node_modules\webpack\buildin\global.js
  Used by 22 module(s), i. e.
  z:\react-shopping-cart\ShoppingCart\ShoppingCart\clientapp\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!z:\react-shopping-cart\ShoppingCart\ShoppingCart\clientapp\node_modules\sockjs-client\lib\entry.js

[James Katarikawe]

@mehmoodahmed Thanks for pointing this out. I also noticed the errors when running tests and was just about to raise an issue on this.

[James Katarikawe]

@mehmoodahmed I had a go at fixing the removing the deprecated lifecycle methods. I raised a PR for this, I welcome any comments on it.