NPM requires a peer of but all peers are in package.json and node_modules - node.js

Question

Im facing the problem that npm on install says
npm WARN eslint-config-react-app#2.0.1 requires a peer of babel-eslint#^7.2.3 but none was installed.
npm WARN eslint-config-react-app#2.0.1 requires a peer of eslint-plugin-jsx-a11y#^5.1.1 but none was installed.
npm WARN semantic-ui-react#0.74.2 requires a peer of react#>=0.14.0 <= 15 but none was installed.
npm WARN semantic-ui-react#0.74.2 requires a peer of react-dom#>=0.14.0 <= 15 but none was installed.
What I think is pretty weird is that I have in fact those dependencies in my package.json and also see them inside the node_modules folder.
My package.json:
{
"name": "react-box",
"version": "0.1.0",
"private": true,
"devDependencies": {
"autoprefixer": "7.1.4",
"babel-core": "6.26.0",
"babel-eslint": "^8.0.1",
"babel-jest": "21.2.0",
"babel-loader": "7.1.2",
"babel-preset-react-app": "^3.0.3",
"case-sensitive-paths-webpack-plugin": "2.1.1",
"chalk": "2.1.0",
"connect-history-api-fallback": "1.3.0",
"cross-spawn": "5.1.0",
"css-loader": "0.28.7",
"detect-port": "1.2.1",
"dotenv": "4.0.0",
"eslint": "4.8.0",
"eslint-config-react-app": "^2.0.1",
"eslint-loader": "1.9.0",
"eslint-plugin-flowtype": "2.38.0",
"eslint-plugin-import": "2.7.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-react": "7.4.0",
"extract-text-webpack-plugin": "3.0.1",
"file-loader": "1.1.5",
"filesize": "3.5.10",
"fs-extra": "4.0.2",
"gzip-size": "4.0.0",
"html-webpack-plugin": "2.30.1",
"http-proxy-middleware": "0.17.4",
"jest": "21.2.1",
"json-loader": "0.5.7",
"object-assign": "4.1.1",
"path-exists": "3.0.0",
"postcss-loader": "2.0.6",
"promise": "8.0.1",
"react-dev-utils": "^4.1.0",
"recursive-readdir": "2.2.1",
"strip-ansi": "4.0.0",
"style-loader": "0.19.0",
"truffle-contract": "^3.0.0",
"truffle-solidity-loader": "0.0.8",
"url-loader": "0.6.2",
"webpack": "3.6.0",
"webpack-dev-server": "2.9.1",
"webpack-manifest-plugin": "1.3.2",
"whatwg-fetch": "2.0.3"
},
"dependencies": {
"axios": "^0.16.2",
"babel-eslint": "^8.0.1",
"dotenv": "^2.0.0",
"react": "^16.0.0",
"react-countup": "^2.2.0",
"react-dom": "^16.0.0",
"semantic-ui-react": "^0.74.2"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom"
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx}"
],
"setupFiles": [
"<rootDir>/config/polyfills.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.js?(x)",
"<rootDir>/src/**/?(*.)(spec|test).js?(x)"
],
"testEnvironment": "node",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web"
},
"moduleFileExtensions": [
"web.js",
"js",
"json",
"web.jsx",
"jsx"
]
},
"babel": {
"presets": [
"react-app"
]
},
"eslintConfig": {
"extends": "react-app"
}
}
When trying to install those peers manually like this:
npm install babel-eslint --save-dev
I still get the error:
├── UNMET PEER DEPENDENCY babel-eslint#8.0.1
├── UNMET PEER DEPENDENCY eslint-plugin-jsx-a11y#6.0.2
├── UNMET PEER DEPENDENCY react#16.0.0
└── UNMET PEER DEPENDENCY react-dom#16.0.0
Maybe I dont understand how NPM works but to my understanding doing the installs manually at least should solve it, right?
If anyone needs more info just comment and I will provide the additional info. Thanks!

Answer 1

NPM warnings about peerDeps versions mismatch are correct here. These packages are installed, but installed versions is not supported by some other packages you have.
In your case - they're too new, meaning that maintainers of warning packages are not updated yet to these versions. And restricted required peerDeps version in API-compatible range (no breaking/major version leap).
eslint-config-react-app#2.0.1 requires a peer deps: babel-eslint#^7.2.3 (i.e. 7.x.x) and eslint-plugin-jsx-a11y#^5.1.1 (i.e. 5.x.x).
Your versions is "babel-eslint": "^8.0.1" and "eslint-plugin-jsx-a11y": "^6.0.2". The first digit - major - is not matched. This is what ^ (caret) mark is about.
Same with semantic-ui-react - they does not support react#16 yet (🤗 I can't wait too!).
Until then you can install packages with exact major version:
> npm view babel-eslint#7.* version // list released versions in required range 7.x.x
babel-eslint#7.0.0 '7.0.0'
babel-eslint#7.1.0 '7.1.0'
babel-eslint#7.1.1 '7.1.1'
babel-eslint#7.2.0 '7.2.0'
babel-eslint#7.2.1 '7.2.1'
babel-eslint#7.2.2 '7.2.2'
babel-eslint#7.2.3 '7.2.3'
> npm install --save-dev babel-eslint#7.2.3 // install latest version in required range
Same with other packages.
PS: also, in package.json you have to delete duplicated records: babel-eslint and dotenv in dependencies, since they are declared in devDependencies already.