Related
In existing project we were trying to upgrade react-scripts from V4.0.3 => V5.0.1. After upgrade, Craco also need upgradation, so we have upgraded Craco V6.1.2 => V7.0.0. It creating issue with webpack-modernizr-loader. webpack-dev-server also not working. Below i have mentioned errors which i am facing.
node_modules/#craco/craco/dist/lib/plugin-utils.js:26
throw new Error("".concat(message, "\n\n") +
^
Error: failed to add webpack-modernizr-loader
This error probably occurred because you updated react-scripts or craco. Please try updating craco to the latest version:
$ yarn upgrade craco
Or:
$ npm update craco
If that doesn't work, craco needs to be fixed to support the latest version.
Please check to see if there's already an issue in the gsoft-inc/craco repo:
https://github.com/gsoft-inc/craco/issues?q=is%3Aissue+webpack
If not, please open an issue and we'll take a look. (Or you can send a PR!)
You might also want to look for related issues in the craco and create-react-app repos:
https://github.com/dilanx/craco/issues?q=is%3Aissue+webpack
https://github.com/facebook/create-react-app/issues?q=is%3Aissue+webpack
at throwUnexpectedConfigError (/node_modules/#craco/craco/dist/lib/plugin-utils.js:26:11)
at throwError (/client/craco.config.js:6:5)
at configure (/client/craco.config.js:52:40)
at giveTotalControl (/node_modules/#craco/craco/dist/lib/features/webpack/merge-webpack-config.js:76:25)
at mergeWebpackConfig (/node_modules/#craco/craco/dist/lib/features/webpack/merge-webpack-config.js:116:38)
at overrideWebpackDev (/node_modules/#craco/craco/dist/lib/features/webpack/override.js:8:80)
at //node_modules/#craco/craco/dist/scripts/start.js:21:39
npm ERR! Lifecycle script start-local failed with error:
npm ERR! Error: command failed
npm ERR! in workspace: client#1.0.0
npm ERR! at location: /client
Warning for Https & Middleware. Unable to resolve from config options.
waring
Craco Config:
const path = require('path');
const { addBeforeLoader, loaderByName, throwUnexpectedConfigError } = require('#craco/craco');
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const throwError = (message) =>
throwUnexpectedConfigError({
packageName: 'craco',
githubRepo: 'gsoft-inc/craco',
message,
githubIssueQuery: 'webpack',
});
module.exports = () => {
const plugins = [];
// if (process.env.NODE_ENV !== "production") {
// plugins.push(new BundleAnalyzerPlugin())
// }
return {
eslint: {
enable: true,
},
style: {
css: {
loaderOptions: {
modules: { localIdentName: '[local]_[hash:base64:5]' },
},
},
},
webpack: {
alias: {
react: path.resolve(__dirname, '../node_modules', 'react'),
'react-dom': path.resolve(__dirname, '../node_modules', 'react-dom'),
'modernizr': path.resolve(__dirname, "./.modernizrrc.js")
},
plugins,
configure: webpackConfig => {
// Adding modernizr loader Start
const modernizrLoader = {
loader: "webpack-modernizr-loader",
test: /\.modernizrrc\.js$/,
};
const { isAdded: modernizrLoaderIsAdded } = addBeforeLoader(webpackConfig, loaderByName('url-loader'), modernizrLoader);
if (!modernizrLoaderIsAdded) throwError('failed to add webpack-modernizr-loader');
// Adding modernizr loader End
const scopePluginIndex = webpackConfig.resolve.plugins.findIndex(
({ constructor }) => constructor && constructor.name === 'ModuleScopePlugin'
);
const [ clientSrc ] = webpackConfig.resolve.plugins[scopePluginIndex].appSrcs;
const psvServices = path.resolve(clientSrc,'../..');
webpackConfig.resolve.plugins[scopePluginIndex].appSrcs.push(psvServices);
return webpackConfig;
}
}
}
};
Tried to upgrade craco with react-scripts to latest versions. It's not working for me. Application is breaking by upgradation. Craco config style object not configuring properly, haviny issue with webpack-modernizr-loader.
Project dependencies:
"dependencies": {
"#babel/polyfill": "^7.0.0",
"#babel/runtime-corejs2": "^7.4.3",
"#instana/collector": "^1.129.0",
"#material-ui/core": "^4.11.4",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.49",
"algoliasearch": "^3.29.0",
"apollo-errors": "^1.9.0",
"apollo-server-koa": "^1.3.4",
"aws-sdk": "^2.281.1",
"base-64": "^0.1.0",
"basic-auth": "^2.0.0",
"blocked": "^1.3.0",
"bunyan": "^1.8.12",
"cheerio": "^1.0.0-rc.2",
"classnames": "^2.2.6",
"cls-hooked": "^4.2.2",
"consul": "^0.34.0",
"cross-env": "^5.2.0",
"crypto-js": "^3.1.9-1",
"csvtojson": "^1.1.9",
"date-fns": "^2.11.1",
"debug": "^3.1.0",
"dotenv": "^8.2.0",
"draft-js": "0.10.4",
"draft-js-export-html": "^1.3.3",
"draft-js-plugins-editor": "^2.1.1",
"ejs": "^3.1.8",
"element-scroll-polyfill": "^1.0.1",
"eslint-plugin-react-hooks": "^4.2.0",
"fetch-timeout": "^0.0.2",
"flexboxgrid": "^6.3.1",
"form-data": "^2.3.2",
"graphql": "^0.13.2",
"graphql-tools": "^3.0.5",
"hare-niemeyer": "^2.0.0",
"history": "^4.7.2",
"humps": "^2.0.1",
"jest-canvas-mock": "^2.2.0",
"joi": "^17.6.4",
"jsonwebtoken": "^8.3.0",
"koa": "^2.5.2",
"koa-body": "^4.0.4",
"koa-bunyan-logger": "^2.1.0",
"koa-compress": "^3.0.0",
"koa-convert": "^1.2.0",
"koa-cookie": "^1.0.0",
"koa-cors": "0.0.16",
"koa-json": "^2.0.2",
"koa-router": "^7.4.0",
"koa-validate": "^1.0.7",
"lodash": "^4.17.21",
"memoize-one": "^5.1.1",
"merge-graphql-schemas": "^1.5.1",
"modernizr": "^3.12.0",
"moment": "^2.29.4",
"moment-timezone": "^0.5.21",
"mutation-observer": "^1.0.3",
"node-fetch": "^2.6.7",
"normalize.css": "^8.0.0",
"npm-link-shared": "^0.5.6",
"oauth-1.0a": "^2.2.4",
"object-hash": "^1.3.1",
"openapi-request-validator": "^10.0.0",
"openapi-response-validator": "^10.0.0",
"openapi-schema-validator": "^10.0.0",
"parse-domain": "^2.1.6",
"pg": "^8.6.0",
"pg-format": "^1.0.4",
"pg-pool": "^3.2.2",
"prop-types": "^15.6.2",
"puresql": "^1.8.0",
"query-string": "5",
"raf": "^3.4.1",
"react": "^17.0.2",
"react-aria-live": "^2.0.5",
"react-card-flip": "^1.0.11",
"react-copy-to-clipboard": "^5.0.1",
"react-day-picker": "^7.1.10",
"react-dom": "^17.0.2",
"react-dotdotdot": "^1.2.3",
"react-dropzone": "^4.2.13",
"react-grid-layout": "^0.18.3",
"react-html-parser": "^2.0.2",
"react-lazyload": "^2.6.2",
"react-media": "^1.8.0",
"react-modal": "^3.5.1",
"react-paginate": "^6.2.1",
"react-popper": "^1.3.3",
"react-redux": "^7.2.6",
"react-router-dom": "5.3.0",
"react-scroll": "^1.7.10",
"react-split-pane": "^0.1.87",
"react-sticky": "^6.0.3",
"react-tabs": "^2.2.2",
"react-timeout": "^1.1.1",
"react-tooltip": "^3.11.1",
"react-transition-group": "^4.4.1",
"react-truncate": "^2.4.0",
"react-virtualized": "^9.21.0",
"reactable": "1.0.0",
"recharts": "^2.1.15",
"redux": "^4.0.0",
"redux-devtools-extension": "^2.13.7",
"redux-localstorage": "^0.4.1",
"redux-thunk": "^2.3.0",
"request": "^2.88.0",
"request-ip": "^2.1.3",
"reselect": "^4.0.0",
"resize-observer-polyfill": "^1.5.1",
"sequelize": "^6.6.5",
"swagger2-koa": "^1.0.2",
"text-encoding": "^0.6.4",
"uglify-js": "^3.13.3",
"universal-cookie": "^2.2.0",
"url-pattern": "^1.0.3",
"use-resize-observer": "^6.1.0-alpha.3",
"uuid": "^3.3.2",
"validate.js": "^0.12.0",
"whatwg-fetch": "^3.4.1",
"xlsx": "^0.18.5"
},
"devDependencies": {
"#babel/cli": "^7.12.10",
"#babel/core": "^7.14.6",
"#babel/node": "^7.14.7",
"#babel/eslint-parser": "^7.19.1",
"#babel/plugin-proposal-class-properties": "^7.0.0",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/plugin-syntax-import-meta": "^7.0.0",
"#babel/plugin-transform-regenerator": "^7.0.0",
"#babel/plugin-transform-runtime": "^7.0.0",
"#babel/preset-env": "^7.14.7",
"#babel/preset-react": "^7.0.0",
"#babel/register": "^7.0.0",
"#craco/craco": "^7.0.0",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/react-hooks": "^7.0.0",
"#testing-library/user-event": "^12.1.10",
"#welldone-software/why-did-you-render": "^2.4.0",
"#wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
"autoprefixer": "^9.0.1",
"babel-jest": "^28.1.3",
"babel-loader": "^7.1.1",
"babel-plugin-dynamic-import-node": "^2.3.3",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-register": "^6.26.0",
"babel-runtime": "^6.23.0",
"browser-sync": "^2.27.10",
"command-line-args": "^5.0.2",
"concurrently": "^6.3.0",
"connect-history-api-fallback": "^1.5.0",
"css-loader": "^6.7.1",
"cypress-failed-log": "^2.1.0",
"enzyme": "^3.11.0",
"eslint": "^7.27.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^8.3.0",
"eslint-config-react-app": "^6.0.0",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-loader": "^1.9.0",
"eslint-plugin-flowtype": "^5.7.2",
"eslint-plugin-import": "^2.23.3",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-react": "^7.23.2",
"file-loader": "^1.1.11",
"highlight.js": "^9.12.0",
"husky": "^8.0.1",
"hygen": "^6.2.11",
"identity-obj-proxy": "^3.0.0",
"jest-junit": "^1.5.1",
"json-loader": "^0.5.7",
"lerna": "^5.4.0",
"local-ssl-proxy": "^1.3.0",
"madge": "^5.0.1",
"markdown-it": "^13.0.0",
"nodemon": "^2.0.20",
"path-to-regexp": "^2.2.1",
"pixrem": "^5.0.0",
"postcss": "^7.0.14",
"postcss-apply": "^0.12.0",
"postcss-calc": "^7.0.1",
"postcss-custom-properties": "^8.0.10",
"postcss-custom-selectors": "^5.1.2",
"postcss-flexbugs-fixes": "^4.1.0",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"postcss-media-minmax": "^4.0.0",
"postcss-nesting": "^7.0.0",
"postcss-selector-matches": "^4.0.0",
"postcss-selector-not": "^4.0.0",
"prettier": "^2.3.0",
"react-hot-loader": "^4.3.4",
"react-router-sitemap": "^1.2.0",
"react-scripts": "^5.0.1",
"react-test-renderer": "17.0.2",
"redux-mock-store": "^1.5.3",
"regenerator-runtime": "^0.13.2",
"rimraf": "^2.6.2",
"should": "^13.2.2",
"sqlite3": "^5.1.1",
"style-loader": "^3.3.1",
"stylelint": "^13.13.1",
"stylelint-config-standard": "^19.0.0",
"url-loader": "^4.1.1",
"wait-for-expect": "^3.0.1",
"webpack-bundle-analyzer": "^4.4.2"
},
I'm compiling my rails app with webpack and getting an error in the logs. It's associated with using react-bootstrap, but I'm trying to figure out how to resolve this error that repeats a dozen or more times.
I get the error in the webpack-dev-server and in the web server logs. It doesn't seem to be causing any functional issues. It's all just css crap.
I need to know how to make the warning go away by silencing the warning or fixing the code conflict
WARNING in ./node_modules/bootstrap/dist/css/bootstrap.min.css (./node_modules/css-loader??ref--5-1!./node_modules/postcss-loader/src??ref--5-2!./node_modules/bootstrap/dist/css/bootstrap.min.css)
19:01:15 webpack-dev-server.1 | Module Warning (from ./node_modules/postcss-loader/src/index.js):
19:01:15 webpack-dev-server.1 | Warning
19:01:15 webpack-dev-server.1 |
19:01:15 webpack-dev-server.1 | (6:9806) Custom property ignored: not scoped to the top-level :root element (.g-4,.gx-4 { ... --bs-gutter-x: ... })
19:01:15 webpack-dev-server.1 | # ./node_modules/bootstrap/dist/css/bootstrap.min.css 2:26-144 53:4-74:5 56:18-136
19:01:15 webpack-dev-server.1 | # ./app/javascript/CommonComponents/UploadWidget/index.js
19:01:15 webpack-dev-server.1 | # ./app/javascript/Project/Components/App.js
19:01:15 webpack-dev-server.1 | # ./app/javascript/Project/index.js
19:01:15 webpack-dev-server.1 | # ./app/javascript/packs/project.js
Here's my package.json file for reference:
{
"name": "timelord",
"private": true,
"dependencies": {
"#babel/core": "^7.14.6",
"#babel/preset-env": "^7.14.7",
"#babel/preset-react": "^7.14.5",
"#rails/webpacker": "^5.4.0",
"#reach/router": "^1.2.1",
"#sentry/browser": "^5.10.2",
"axios": "^0.21.1",
"babel-eslint": "^7.2.3",
"babel-loader": "^8.2.2",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"bootstrap": "^5.1.1",
"classnames": "^2.2.6",
"css-loader": "^1.0.1",
"css-what": "^5.0.1",
"eslint": "^4.19.1",
"eslint-config-prettier": "^2.9.0",
"eslint-config-react-app": "^2.1.0",
"eslint-plugin-flowtype": "^2.49.3",
"eslint-plugin-import": "^2.19.1",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-prettier": "2.6.0",
"eslint-plugin-react": "^7.17.0",
"eslint-plugin-react-hooks": "^1.7.0",
"get-youtube-id": "^1.0.1",
"glob-parent": "^6.0.0",
"lodash": "^4.17.15",
"moment": "^2.22.2",
"node-sass": "^6.0.1",
"normalize-url": "^6.1.0",
"object-to-formdata": "^1.6.4",
"popper.js": "^1.16.0",
"postcss-cssnext": "^3.1.0",
"prettier": "1.16.3",
"prop-types": "^15.7.2",
"qs": "^6.9.1",
"query-string": "^6.9.0",
"react": "^16.12.0",
"react-bootstrap": "^1.6.3",
"react-dom": "^16.12.0",
"react-dropzone": "^7.0.1",
"react-facebook-login": "^4.1.1",
"react-iframe": "^1.8.0",
"react-redux": "^7.2.5",
"react-router-dom": "^5.1.2",
"react-stripe-elements": "^6.0.1",
"react-toastify": "^8.0.2",
"react-transition-group": "^2.9.0",
"react-youtube": "^7.13.1",
"redux": "^4.0.4",
"redux-batched-actions": "^0.4.1",
"redux-devtools": "^3.4.1",
"redux-thunk": "^2.3.0",
"smoothscroll-polyfill": "^0.4.4",
"uuid": "^3.4.0",
"webpack-serve": "^4.0.0"
},
"devDependencies": {
"postcss-loader": "^3.0.0",
"webpack": "^4.46.0",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "^4.2.0"
},
"prettier": {
"jsxSingleQuote": true,
"singleQuote": true,
"jsxBracketSameLine": false,
"printWidth": 80,
"trailingComma": "es5",
"semi": true
},
"babel": {
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
},
"engines": {
"node": "14.17.1",
"npm:": "6.14.4"
},
"resolutions": {
"glob-parent": "5.1.2",
"css-what": "5.0.1",
"normalize-url": "4.5.1"
},
"scripts": {
"preinstall": "npm install --package-lock-only --ignore-scripts && npx npm-force-resolutions"
}
}
When i run my react project i get this following vulnerabilities:
How can i fix this problem?
And can anyone please explain me what this actually is warning me about?
Do i need to update babel-cli?
I have tried to install braces#2.3.0 to see if this warning get away, but nothing changes when i install it.
My package.json file:
{
"name": "Recordshop",
"version": "1.0.0",
"scripts": {
"prestart": "babel-node src-gen/config/startMessage.js",
"start": "npm-run-all --parallel open:src-gen lint:watch",
"open:src-gen": "babel-node src-gen/config/server.dev.js",
"lint": "node_modules/.bin/esw webpack.config.* src-gen src-gen/config",
"lint:watch": "npm run lint -- --watch",
"clean-prod": "npm run remove-prod && mkdirp prod/app",
"remove-prod": "node_modules/.bin/rimraf ./prod",
"build:html": "babel-node src-gen/config/buildHTML.js",
"prebuild": "npm-run-all clean-prod lint build:html",
"build": "babel-node src-gen/config/build.js",
"postbuild": "babel-node src-gen/config/server.prod.js"
},
"private": true,
"optionalDependencies": {
"fsevents": "*"
},
"dependencies": {
"babel-polyfill": "^6.23.0",
"es6-promise": "^4.0.5",
"isomorphic-fetch": "^2.2.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-fontawesome": "^1.6.1",
"react-redux": "^5.0.5",
"react-router-dom": "^4.1.1",
"react-router-redux": "^4.0.7",
"reduce-reducers": "^0.1.2",
"redux": "^3.6.0",
"redux-thunk": "^2.1.0"
},
"devDependencies": {
"ajv": "^5.0.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-plugin-react-display-name": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators": "6.24.1",
"babel-preset-env": "^1.6.0",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"babel-register": "^6.24.1",
"chalk": "^2.1.0",
"cheerio": "^1.0.0-rc.2",
"colors": "^1.1.2",
"compression": "^1.6.2",
"compression-webpack-plugin": "^1.1.11",
"cross-env": "^5.0.0",
"css-loader": "^2.1.1",
"eslint": "^4.19.0",
"eslint-import-resolver-webpack": "^0.8.1",
"eslint-plugin-import": "^2.3.0",
"eslint-plugin-react": "^7.0.1",
"eslint-watch": "^3.1.0",
"eventsource-polyfill": "^0.9.6",
"express": "^4.15.3",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.11",
"image-webpack-loader": "^4.2.0",
"jquery": "^3.1.1",
"mkdirp": "^0.5.1",
"node-sass": "^4.5.3",
"npm-run-all": "^4.0.2",
"open": "^6.3.0",
"redux-immutable-state-invariant": "^2.0.0",
"rimraf": "^2.5.4",
"sass-loader": "^6.0.5",
"style-loader": "^0.20.3",
"url-loader": "^1.0.1",
"webpack": "^4.32.2",
"webpack-combine-loaders": "^2.0.3",
"webpack-dev-middleware": "^2.0.5",
"webpack-hot-middleware": "^2.18.0"
}
}
Thank you for all help!
I got same error. And it was the babel-core error. Try update babel-core using yarn add --dev babel-jest babel-core#^7.0.0-bridge.0 #babel/core regenerator-runtime
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.
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