I have react 16.3.2, and today i attempted to upgrade it through yarn upgrade react#latest it has upgraded the yarn.lock's react#^16.8.2 but when I console.log out the react version it still outputs 16.3.2 Did I miss something?
Here's my package.json
{
"name": "client",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"tj": "jest",
"test": "yarn jest --watch",
"coverage": "yarn jest --coverage || true",
"test:watch": "npm test -- --watch",
"start": "NODE_ENV=dev node server.js",
"startw": "NODE_ENV=dev nodemon --watch webpack.config.js server.js"
},
"jest": {
"setupTestFrameworkScriptFile": "./config/testSetupV1.js",
"setupFiles": [
"raf/polyfill"
],
"moduleNameMapper": {
"\\.(css)$": "<rootDir>/node_modules/jest-css-modules",
"\\.(scss)$": "<rootDir>/node_modules/jest-css-modules",
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js"
},
"globals": {
"__TEST__": true
}
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.1.6",
"#babel/plugin-proposal-class-properties": "^7.0.0-beta.42",
"#babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.42",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/preset-env": "^7.0.0-beta.42",
"#babel/preset-flow": "^7.0.0-beta.42",
"#babel/preset-react": "^7.0.0-beta.42",
"#babel/preset-stage-0": "^7.0.0-beta.42",
"#loadable/component": "^5.1.2",
"#welldone-software/why-did-you-render": "^2.3.2",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^8.2.1",
"babel-jest": "^23.6.0",
"babel-loader": "^8.0.0-beta.2",
"babel-plugin-react-hot": "^1.0.4",
"babel-plugin-transform-export-extensions": "^6.22.0",
"babel-plugin-transform-flow-strip-types": "^6.22.0",
"babel-polyfill": "^6.23.0",
"babel-register": "^6.23.0",
"clean-webpack-plugin": "^1.0.0",
"css-loader": "^0.28.11",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.0.4",
"enzyme-to-json": "^3.2.2",
"eslint": "^4.15.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-flowtype": "^2.41.0",
"eslint-plugin-flowtype-errors": "^3.5.1",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-prettier": "^2.4.0",
"eslint-plugin-react": "^7.5.1",
"eslint_d": "^5.3.0",
"expect": "^1.16.0",
"extract-text-webpack-plugin": "^3.0.0",
"flow-bin": "^0.71.0",
"happypack": "^3.0.3",
"jest": "^23.6.0",
"jest-cli": "^23.6.0",
"jest-css-modules": "^1.1.0",
"jsdom": "^8.2.0",
"mocha": "^2.4.5",
"mocha-jsdom": "^1.1.0",
"node-sass": "^4.9.4",
"npm-check-updates": "^2.8.9",
"npm-install-webpack-plugin": "^4.0.4",
"postcss-global-import": "^1.0.1",
"postcss-loader": "^2.1.3",
"prettier-eslint": "^8.7.1",
"prettier-eslint-cli": "^4.7.0",
"raf": "^3.4.0",
"react-addons-test-utils": "^15.1.0",
"react-dev-utils": "^4.1.0",
"react-hot-loader": "^4.5.3",
"react-render-visualizer": "^0.2.2",
"react-testing-library": "5.2.3",
"redux-devtools": "^3.4.2",
"redux-devtools-chart-monitor": "^1.6.1",
"redux-devtools-dock-monitor": "^1.1.3",
"redux-devtools-log-monitor": "^1.0.11",
"redux-slider-monitor": "^2.0.0-1",
"sass-loader": "^6.0.7",
"sinon": "^1.17.3",
"style-loader": "^0.13.1",
"webpack": "^4.5.0",
"webpack-assets-manifest": "^3.1.1",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.4",
"webpack-notifier": "^1.5.0",
"why-did-you-update": "^1.0.6"
},
"dependencies": {
"Faker": "^0.7.2",
"annyang": "^2.6.0",
"aphrodite": "^1.1.0",
"axios": "^0.16.1",
"chrono": "^1.0.5",
"chrono-node": "^1.2.5",
"classnames": "^2.2.5",
"color": "^0.11.3",
"counterpart": "^0.17.4",
"cuid": "^1.3.8",
"damals": "^0.9.4",
"date-fns": "^1.28.0",
"delay": "^1.3.1",
"draft-js": "^0.7.0",
"draft-js-export-html": "^0.3.0",
"fast-memoize": "^2.5.1",
"fecha": "^2.1.0",
"file-loader": "^0.8.5",
"flow-typed": "^2.4.0",
"focus-trap-react": "^3.1.2",
"folktale": "^2.0.1",
"friendly-truncate": "^1.0.3",
"futils": "^3.0.1",
"glamor": "^2.20.40",
"glamorous": "^4.11.0",
"hh-mm-ss": "^1.1.0",
"history": "^2.0.1",
"hms-time": "^0.1.1",
"humanize-plus": "^1.8.2",
"install": "^0.12.2",
"interact.js": "^1.2.8",
"intl": "^1.1.0",
"jason-form": "^0.0.3",
"lodash": "^4.13.1",
"memoizee": "^0.3.10",
"moment": "^2.17.1",
"node-quickbooks": "^2.0.20",
"normalizr": "^2.1.0",
"object-to-formdata": "^1.5.2",
"parse-address": "^0.0.10",
"password-generator": "^2.2.0",
"pluralize": "^3.0.0",
"postcss": "^5.2.17",
"postcss-cssnext": "^2.10.0",
"postcss-import": "^9.1.0",
"prop-types": "^15.5.10",
"pubnub": "^4.13.0",
"query-string": "^4.2.2",
"query-string-parser": "^0.1.4",
"ramda": "^0.25.0",
"ramda-adjunct": "^2.10.0",
"ramda-fantasy": "^0.8.0",
"react": "^16.8.2",
"react-addons-shallow-compare": "^15.1.0",
"react-addons-text-content": "^0.0.4",
"react-calendar-timeline": "^0.11.1",
"react-dnd": "^2.1.4",
"react-dnd-html5-backend": "^2.1.2",
"react-dom": "^16.8.2",
"react-dropzone": "^4.2.9",
"react-floating-label": "^1.0.0",
"react-fontawesome": "1.6.1",
"react-functional": "^1.2.0",
"react-grid-layout": "^0.16.0",
"react-hotkeys": "^0.10.0",
"react-idle": "^3.0.0",
"react-is": "^16.8.2",
"react-json-pretty": "^1.7.9",
"react-loadable": "^5.3.1",
"react-loadable-visibility": "^2.5.0",
"react-modal": "^3.1.0",
"react-player": "^0.25.0",
"react-quill": "^1.1.0",
"react-redux": "^4.4.5",
"react-resizable": "^1.7.1",
"react-router": "^3.0.0-beta.1",
"react-router-redux": "^4.0.0",
"react-rte": "^0.15.0",
"react-select": "^2.0.0-beta.7",
"react-spinners": "^0.1.5",
"react-stateful-fn": "^0.1.0",
"react-stateless": "^0.2.1",
"react-sticky": "^6.0.3",
"react-stripe-checkout": "^2.6.3",
"react-test-renderer": "^16.1.0",
"react-tiny-virtual-list": "^2.1.2",
"react-toastify": "^2.0.0",
"react-toolbox": "^2.0.0-beta.8",
"react-visibility-sensor": "^5.0.2",
"recharts": "^1.0.1",
"recompose": "^0.27.0",
"reduce-reducers": "^0.1.2",
"redux": "^3.5.2",
"redux-crud": "^3.2.0",
"redux-form": "^7.4.2",
"redux-mock-store": "^1.5.3",
"redux-saga": "^0.16.0",
"reselect": "^4.0.0",
"seamless-immutable": "^7.0.0",
"store2": "^2.7.0",
"url-loader": "^0.5.7"
}
}
Thanks in advance!
yarn upgrade does not update package.json, only the lock file. Actually, none of the yarn upgrade flags do. There's a long discussion about this in here
You can do the following:
Reinstall React with yarn add react#latest
Install a npm package to check updates, for example, npm-check-updates. Run it to update package.json and then try yarn install.
Or you can install that specific React version yarn upgrade react#16.8.2.
This is the intended behaviour, even though it is very confusing in the docs.
Related
Node version : 8.10.0
Since I have updated my code on my WebApp, there is an error with notistack. I found then it could be helpful to upgrade material-ui version, but I cannot actualy. Until I re-build my app, it was working well.
Package.json :
{
"name": "fuse-react-app",
"version": "2.2.4",
"private": true,
"dependencies": {
"#antv/data-set": "^0.10.2",
"#antv/g2": "3.2.2",
"#ckeditor/ckeditor5-build-classic": "^12.2.0",
"#ckeditor/ckeditor5-react": "^1.1.3",
"#date-io/date-fns": "1.1.0",
"#material-ui/core": "^3.9.3",
"#material-ui/icons": "3.0.2",
"#material-ui/pickers": "^3.2.2",
"#material-ui/styles": "^4.3.0",
"#react-pdf/renderer": "^1.6.10",
"#stripe/stripe-js": "^1.9.0",
"#tinymce/tinymce-react": "^3.2.0",
"auth0-lock": "^11.27.0",
"autosuggest-highlight": "3.1.1",
"axios": "^0.19.0",
"axios-mock-adapter": "1.16.0",
"babel-polyfill": "7.0.0-beta.3",
"base64-img": "^1.0.4",
"bizcharts": "^3.5.5",
"bootstrap": "^4.3.1",
"chart.js": "2.7.3",
"ckeditor5": "^12.2.0",
"classnames": "latest",
"date-fns": "2.0.0-alpha.27",
"downshift": "3.2.6",
"eslint-config-airbnb": "^17.1.1",
"eslint-config-prettier": "^6.0.0",
"eslint-plugin-prettier": "^3.1.0",
"firebase": "5.8.5",
"formsy-react": "1.1.5",
"google-map-react": "1.1.2",""
"install": "^0.13.0",
"invariant": "^2.2.2",
"js-file-download": "^0.4.8",
"js-yaml": "^3.13.1",
"jsonwebtoken": "8.5.0",
"jss-extend": "6.2.0",
"jwt-decode": "2.2.0",
"keycode": "2.2.0",
"lodash": "^4.17.20",
"logrocket": "^1.0.3",
"material-ui-pickers": "2.2.4",
"material-ui-popup-state": "1.2.0",
"mobile-detect": "1.4.3",
"moment": "^2.24.0",
"mui-datatables": "^2.14.0",
"notistack": "^0.9.5",
"path-to-regexp": "3.0.0",
"perfect-scrollbar": "1.4.0",
"prettier": "^1.18.2",
"prismjs": "1.15.0",
"prop-types": "^15.7.2",
"qs": "6.6.0",
"query-string": "^6.11.1",
"raw-loader": "1.0.0",
"react": "16.8.4",
"react-autosuggest": "9.4.3",
"react-beautiful-dnd": "10.0.4",
"react-big-calendar": "0.20.3",
"react-bootstrap": "^1.0.0-beta.12",
"react-chartjs-2": "2.7.4",
"react-color": "^2.17.3",
"react-dom": "16.8.4",
"react-draggable": "3.2.1",
"react-frame-component": "4.1.0",
"react-jss": "8.6.1",
"react-loadable": "5.5.0",
"react-masonry-css": "1.0.12",
"react-number-format": "4.0.6",
"react-popper": "1.0.2",
"react-redux": "6.0.1",
"react-router-config": "4.4.0-beta.6",
"react-router-dom": "4.4.0-beta.6",
"react-scripts": "2.1.5",
"react-select": "^2.4.3",
"react-stripe-elements": "^3.0.0",
"react-swipeable-views": "0.13.1",
"react-table": "6.9.2",
"react-text-mask": "5.4.3",
"react-virtualized": "9.21.0",
"redux": "4.0.1",
"redux-thunk": "2.3.0",
"sweetalert": "^2.1.2",
"tailwindcss": "0.7.4",
"typeface-muli": "0.0.71",
"uuid": "^3.3.3",
"velocity-animate": "^1.5.2",
"velocity-react": "^1.4.1",
"warning": "^3.0.0",
"yarn": "^1.19.1"
},
"resolutions": {
"react": "16.8.4",
"react-dom": "16.8.4"
},
"devDependencies": {
"#babel/core": "7.2.2",
"#babel/node": "7.2.2",
"#babel/preset-env": "7.3.1",
"cross-env": "5.2.0",
"globby": "8.0.2",
"js-beautify": "1.9.0",
"marked": "^0.7.0",
"purgecss": "1.1.0",
"webpack-bundle-analyzer": "^3.3.2"
}, ... }
I build my app, I execute npm start and then have the next error on my webapp :
Uncaught TypeError: Object(...) is not a function
at Object.<anonymous> (notistack.esm.js:414)
Does anyone have an idea of what could cause this error or how could I resolve it ?
Regards,
I'm using lingui package in my React project with CRA and
I get an error when using lingui/macro modules t method.
When I build project got webpack warning message.
Like this.
Critical dependency: the request of a dependency is an expression
This seems to be due to bable-plugin-macro, but I don't know the exact cause. Help me!!
Here my error & codes
import { t } from '#lingui/macro';
render() {
return (
<ListItemText primary={i18n._(t`Apps`)} />
)
}
error:
ERROR in ./node_modules/import-fresh/node_modules/resolve-from/index.js
Module not found: Error: Can't resolve 'module' in 'D:\myProject\node_modules\import-fresh\node_modules\resolve-from'
# ./node_modules/import-fresh/node_modules/resolve-from/index.js 3:15-32
# ./node_modules/import-fresh/index.js
# ./node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist/loaders.js
# ./node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist/index.js
package.json:
"dependencies": {
"#babel/core": "^7.10.2",
"#condenast/xml-to-react": "^1.0.0",
"#date-io/moment": "1.3.13",
"#lingui/core": "^2.9.1",
"#lingui/react": "^2.9.1",
"#loadable/component": "^5.12.0",
"#material-ui/core": "^4.2.1",
"#material-ui/icons": "^4.2.1",
"#material-ui/lab": "^4.0.0-alpha.21",
"#material-ui/pickers": "^3.2.10",
"#svgr/webpack": "4.1.0",
"#types/crypto-js": "^3.1.43",
"#types/jxon": "^2.0.0",
"#types/lingui__macro": "^2.7.3",
"#types/lingui__react": "^2.8.2",
"#types/loadable__component": "^5.10.0",
"#types/lodash": "^4.14.149",
"#types/material-ui": "^0.21.7",
"#types/node": "^12.12.21",
"#types/react-beautiful-dnd": "^12.1.2",
"#types/react-loadable": "^5.5.3",
"#types/react-router-dom": "^5.1.3",
"#types/recharts": "^1.8.10",
"#typescript-eslint/eslint-plugin": "1.6.0",
"#typescript-eslint/parser": "1.6.0",
"axios": "^0.19.0",
"babel-eslint": "10.0.1",
"babel-jest": "^24.8.0",
"babel-loader": "^8.1.0",
"babel-plugin-named-asset-import": "^0.3.2",
"babel-preset-react-app": "^9.0.0",
"camelcase": "^5.2.0",
"case-sensitive-paths-webpack-plugin": "2.2.0",
"crypto-js": "^4.0.0",
"css-loader": "2.1.1",
"dotenv": "6.2.0",
"dotenv-expand": "4.2.0",
"eslint": "^5.16.0",
"eslint-config-react-app": "^4.0.1",
"eslint-loader": "2.1.2",
"eslint-plugin-flowtype": "2.50.1",
"eslint-plugin-import": "2.16.0",
"eslint-plugin-jsx-a11y": "6.2.1",
"eslint-plugin-react": "7.12.4",
"eslint-plugin-react-hooks": "^1.5.0",
"file-loader": "3.0.1",
"fs-extra": "7.0.1",
"html-webpack-plugin": "4.0.0-beta.5",
"identity-obj-proxy": "3.0.0",
"is-wsl": "^1.1.0",
"jest": "24.7.1",
"jest-environment-jsdom-fourteen": "0.1.0",
"jest-resolve": "24.7.1",
"jest-watch-typeahead": "0.3.0",
"jxon": "^2.0.0-beta.5",
"lodash": "^4.17.15",
"material-table": "^1.54.2",
"md5": "^2.2.1",
"mini-css-extract-plugin": "0.5.0",
"mobx": "4.3.1",
"mobx-react": "^6.1.1",
"moment": "^2.24.0",
"optimize-css-assets-webpack-plugin": "5.0.1",
"pnp-webpack-plugin": "1.2.1",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-normalize": "7.0.1",
"postcss-preset-env": "6.6.0",
"postcss-safe-parser": "4.0.1",
"react": "^16.8.6",
"react-app-polyfill": "^1.0.1",
"react-beautiful-dnd": "^13.0.0",
"react-contenteditable": "^3.3.2",
"react-dev-utils": "^9.0.1",
"react-dom": "^16.8.6",
"react-json-editor-ajrm": "^2.5.9",
"react-loadable": "^5.5.0",
"react-perf-devtool": "^3.1.8",
"react-router-dom": "^5.0.1",
"recharts": "^1.8.5",
"resolve": "1.10.0",
"semver": "6.0.0",
"style-loader": "0.23.1",
"terser-webpack-plugin": "1.2.3",
"ts-pnp": "1.1.2",
"tslint": "^5.20.1",
"url-loader": "1.1.2",
"uuid": "^7.0.2",
"validator": "^11.1.0",
"webpack": "4.29.6",
"webpack-dev-server": "3.2.1",
"webpack-manifest-plugin": "2.0.4",
"workbox-webpack-plugin": "4.2.0"
},
"babel": {
"presets": [
"react-app",
"babel-preset-env",
"babel-preset-react",
"#lingui/babel-preset-react"
],
"plugins": [
"macros",
"babel-plugin-macros",
[
"#babel/plugin-proposal-decorators",
{
"legacy": true
}
]
],
"ignore": [
"node_modules",
"public/dist"
]
},
"devDependencies": {
"#babel/plugin-proposal-decorators": "^7.7.4",
"#babel/preset-env": "^7.10.2",
"#lingui/cli": "^2.9.1",
"#lingui/macro": "^2.9.1",
"autoprefixer": "^9.6.1",
"awesome-typescript-loader": "^5.2.1",
"babel-core": "^7.0.0-bridge.0",
"babel-plugin-macros": "^2.8.0",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"cross-env": "^5.2.0",
"cssnano": "^4.1.10",
"eslint-config-prettier": "^6.0.0",
"eslint-plugin-prettier": "^3.1.0",
"fork-ts-checker-webpack-plugin": "^3.1.1",
"hard-source-webpack-plugin": "^0.13.1",
"node-cmd": "^3.0.0",
"node-sass": "^4.9.3",
"prettier": "^1.18.2",
"prettier-eslint": "^9.0.0",
"sass-loader": "^7.1.0",
"source-map-loader": "^0.2.4",
"ts-loader": "^6.2.1",
"typescript": "^3.7.3",
"typescript-eslint-parser": "^18.0.0",
"webpack-cli": "^3.3.6"
},
I am new to MobX with React. So wanted to practice a bit. I created a project with Create React App. I have my package.json as
{
"dependencies": {
"#babel/core": "7.6.0",
"#svgr/webpack": "4.3.2",
"#typescript-eslint/eslint-plugin": "^2.2.0",
"#typescript-eslint/parser": "^2.2.0",
"axios": "^0.19.0",
"babel-eslint": "10.0.3",
"babel-jest": "^24.9.0",
"babel-loader": "8.0.6",
"babel-plugin-named-asset-import": "^0.3.4",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"babel-preset-react-app": "^9.0.2",
"camelcase": "^5.2.0",
"case-sensitive-paths-webpack-plugin": "2.2.0",
"css-loader": "2.1.1",
"dotenv": "6.2.0",
"dotenv-expand": "5.1.0",
"eslint-config-react-app": "^5.0.2",
"eslint-loader": "3.0.2",
"eslint-plugin-flowtype": "3.13.0",
"file-loader": "3.0.1",
"fs-extra": "7.0.1",
"html-webpack-plugin": "4.0.0-beta.5",
"identity-obj-proxy": "3.0.0",
"is-wsl": "^1.1.0",
"jest": "24.9.0",
"jest-environment-jsdom-fourteen": "0.1.0",
"jest-resolve": "24.9.0",
"jest-watch-typeahead": "0.4.0",
"mini-css-extract-plugin": "0.8.0",
"mobx": "^5.15.1",
"mobx-react": "^6.1.4",
"optimize-css-assets-webpack-plugin": "5.0.3",
"pnp-webpack-plugin": "1.5.0",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-normalize": "7.0.1",
"postcss-preset-env": "6.7.0",
"postcss-safe-parser": "4.0.1",
"prop-types": "^15.7.2",
"react": "^16.11.0",
"react-app-polyfill": "^1.0.4",
"react-dev-utils": "^9.1.0",
"react-dom": "^16.11.0",
"react-redux": "^7.1.3",
"react-router": "^5.0.1",
"react-router-dom": "^5.0.1",
"redux": "^4.0.4",
"resolve": "1.12.0",
"resolve-url-loader": "3.1.0",
"sass-loader": "7.2.0",
"semver": "6.3.0",
"source-map-explorer": "^2.0.1",
"style-loader": "1.0.0",
"terser-webpack-plugin": "1.4.1",
"ts-pnp": "1.1.4",
"url-loader": "2.1.0",
"webpack": "4.41.0",
"webpack-dev-server": "3.2.1",
"webpack-manifest-plugin": "2.1.1",
"workbox-webpack-plugin": "4.3.1"
},
"devDependencies": {
"eslint": "^6.7.2",
"eslint-config-airbnb": "^18.0.1",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.17.0",
"eslint-plugin-react-hooks": "^1.7.0",
"flow-bin": "^0.111.3",
"node-sass": "^4.12.0",
"sass-loader": "^7.1.0"
},
"babel": {
"presets": [
"react-app"
],
"plugins": [
["transform-decorators-legacy", { "legacy": true, "decoratorsBeforeExport": false }]
]
}
}
But this is throwing me an error as below
I searched online. Everywhere it is showing to add the above options like legacy, decoratorsBeforeExport, but still no luck. I tried removing all the options, keeping one at a time and the above config also for babel plugins. Still, I am getting this issue.
Doing Lynda - Building and Deploying a Full-Stack React Application tutorial, and get stuck at a point, get following error:
./src/index.js
Error: [BABEL] /Users/kukodajanos/Workspace/ticket/src/index.js: The (relay-query) Babel 5 plugin is being run with an unsupported Babel version. (While processing: "/Users/kukodajanos/Workspace/ticket/node_modules/babel-plugin-react-relay/lib/index.js")
at Array.reduce (<anonymous>)
I tried suggestion written here: https://github.com/facebookarchive/relay-starter-kit/issues/74
npm i babel-relay-plugin#latest --save
It did not help, give same error.
Dependencies from package.json here:
"dependencies": {
"#babel/core": "7.5.5",
"#svgr/webpack": "4.3.2",
"#typescript-eslint/eslint-plugin": "1.13.0",
"#typescript-eslint/parser": "1.13.0",
"babel-eslint": "10.0.2",
"babel-jest": "^24.8.0",
"babel-loader": "8.0.6",
"babel-plugin-named-asset-import": "^0.3.3",
"babel-preset-react-app": "^9.0.1",
"babel-relay-plugin": "^0.11.0",
"camelcase": "^5.2.0",
"case-sensitive-paths-webpack-plugin": "2.2.0",
"css-loader": "2.1.1",
"dotenv": "6.2.0",
"dotenv-expand": "4.2.0",
"eslint": "^6.1.0",
"eslint-config-react-app": "^5.0.1",
"eslint-loader": "2.2.1",
"eslint-plugin-flowtype": "3.13.0",
"eslint-plugin-import": "2.18.2",
"eslint-plugin-jsx-a11y": "6.2.3",
"eslint-plugin-react": "7.14.3",
"eslint-plugin-react-hooks": "^1.6.1",
"file-loader": "3.0.1",
"fs-extra": "7.0.1",
"html-webpack-plugin": "4.0.0-beta.5",
"identity-obj-proxy": "3.0.0",
"is-wsl": "^1.1.0",
"jest": "24.8.0",
"jest-environment-jsdom-fourteen": "0.1.0",
"jest-resolve": "24.8.0",
"jest-watch-typeahead": "0.3.1",
"mini-css-extract-plugin": "0.5.0",
"optimize-css-assets-webpack-plugin": "5.0.3",
"pnp-webpack-plugin": "1.5.0",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-normalize": "7.0.1",
"postcss-preset-env": "6.7.0",
"postcss-safe-parser": "4.0.1",
"prop-types": "^15.7.2",
"react": "^16.9.0",
"react-app-polyfill": "^1.0.2",
"react-dev-utils": "^9.0.3",
"react-dom": "^16.9.0",
"react-router": "3.0.2",
"resolve": "1.12.0",
"resolve-url-loader": "3.1.0",
"sass-loader": "7.2.0",
"semver": "6.3.0",
"style-loader": "1.0.0",
"terser-webpack-plugin": "1.4.1",
"ts-pnp": "1.1.2",
"url-loader": "2.1.0",
"webpack": "4.39.1",
"webpack-dev-server": "3.2.1",
"webpack-manifest-plugin": "2.0.4",
"workbox-webpack-plugin": "4.3.1"
}
"devDependencies": {
"babel-plugin-react-relay": "^0.10.0"
}
When I run the command
npm install react-d3-tooltip --save
it shows the following warning on the terminal like as in the attached image. Unmet peer dependency react#0.14.7.
My package.json file includes the following dependencies
"devDependencies": {
"babel-core": "6.17.0",
"babel-eslint": "7.0.0",
"babel-loader": "6.2.5",
"babel-preset-es2015": "6.16.0",
"babel-preset-react": "6.16.0",
"babel-preset-stage-1": "6.16.0",
"cheerio": "0.22.0",
"colors": "1.1.2",
"copy-webpack-plugin": "3.0.1",
"css-loader": "0.25.0",
"eslint": "2.8.0",
"eslint-plugin-react": "6.3.0",
"extract-text-webpack-plugin": "1.0.1",
"file-loader": "0.9.0",
"jquery": "2.2.2",
"jsdom": "9.6.0",
"json-loader": "0.5.4",
"node-sass": "3.10.1",
"postcss-loader": "0.13.0",
"react-hot-loader": "3.0.0-beta.5",
"redux-devtools": "3.3.1",
"redux-devtools-dock-monitor": "1.1.1",
"redux-devtools-log-monitor": "1.0.11",
"redux-immutable-state-invariant": "1.2.4",
"redux-slider-monitor": "1.0.7",
"rimraf": "2.5.4",
"sass-loader": "4.0.2",
"style-loader": "0.13.1",
"url-loader": "0.5.7",
"webpack": "1.13.2",
"webpack-dashboard": "0.2.0",
"webpack-dev-server": "1.16.2"
},
"dependencies": {
"autoprefixer": "6.5.0",
"classnames": "2.2.5",
"d3": "4.2.8",
"http-server": "0.9.0",
"lodash": "4.16.3",
"react": "15.3.2",
"react-bootstrap": "0.30.5",
"react-d3-tooltip": "1.4.14",
"react-dom": "15.3.2",
"react-intl": "2.1.5",
"react-redux": "4.4.5",
"react-router": "2.8.1",
"react-router-bootstrap": "0.23.1",
"redux": "3.6.0",
"redux-form": "6.1.0",
"redux-intl": "1.0.1",
"semantic-ui-react": "0.56.1"
}
How I can solve this unmet peer dependency