Javascript Tools: ESLint - error installing elint and config

[AlexChesser]

Following along in the course, have arrived at ESlint section. Trying to runt he command:

npm install -D eslint@7.18.0 eslint-config-prettier@8.1.0

receive the errors

PS C:\www\complete-intro-to-react-v6\homework\AdoptMe> npm install -D eslint@7.18.0 eslint-config-prettier@8.1.0 > error-text.txt
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: gatsby@2.30.1
npm ERR! Found: react@17.0.1
npm ERR! node_modules/react
npm ERR!   peer react@"17.0.1" from react-dom@17.0.1
npm ERR!   node_modules/react-dom
npm ERR!     peer react-dom@"^15.0.0 || ^16.0.0 || ^17.0.0 " from react-hot-loader@4.13.0
npm ERR!     node_modules/react-hot-loader
npm ERR!       react-hot-loader@"^4.12.21" from gatsby@2.30.1
npm ERR!       node_modules/gatsby
npm ERR!         peer gatsby@"^2.0.0" from babel-plugin-remove-graphql-queries@2.14.0
npm ERR!         node_modules/babel-plugin-remove-graphql-queries
npm ERR!         11 more (gatsby-plugin-page-creator, ...)
npm ERR!     react-dom@"^17.0.1" from the root project
npm ERR!   peer react@">=16.3.0" from react-helmet@6.1.0
npm ERR!   node_modules/react-helmet
npm ERR!     peer react-helmet@"^5.1.3 || ^6.0.0" from gatsby-plugin-react-helmet@3.8.0
npm ERR!     node_modules/gatsby-plugin-react-helmet
npm ERR!       gatsby-plugin-react-helmet@"^3.8.0" from the root project
npm ERR!     react-helmet@"^6.1.0" from the root project
npm ERR!   3 more (react-hot-loader, react-side-effect, the root project)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.4.2" from gatsby@2.30.1
npm ERR! node_modules/gatsby
npm ERR!   peer gatsby@"^2.0.0" from babel-plugin-remove-graphql-queries@2.14.0
npm ERR!   node_modules/babel-plugin-remove-graphql-queries
npm ERR!     babel-plugin-remove-graphql-queries@"^2.14.0" from gatsby@2.30.1
npm ERR!     1 more (gatsby-plugin-typescript)
npm ERR!   peer gatsby@"^2.0.0" from gatsby-plugin-page-creator@2.8.0
npm ERR!   node_modules/gatsby-plugin-page-creator
npm ERR!     gatsby-plugin-page-creator@"^2.8.0" from gatsby@2.30.1
npm ERR!   10 more (gatsby-plugin-react-helmet, gatsby-plugin-sharp, ...)
npm ERR!
npm ERR! Conflicting peer dependency: react@16.14.0
npm ERR! node_modules/react
npm ERR!   peer react@"^16.4.2" from gatsby@2.30.1
npm ERR!   node_modules/gatsby
npm ERR!     peer gatsby@"^2.0.0" from babel-plugin-remove-graphql-queries@2.14.0
npm ERR!     node_modules/babel-plugin-remove-graphql-queries
npm ERR!       babel-plugin-remove-graphql-queries@"^2.14.0" from gatsby@2.30.1
npm ERR!       1 more (gatsby-plugin-typescript)
npm ERR!     peer gatsby@"^2.0.0" from gatsby-plugin-page-creator@2.8.0
npm ERR!     node_modules/gatsby-plugin-page-creator
npm ERR!       gatsby-plugin-page-creator@"^2.8.0" from gatsby@2.30.1
npm ERR!     10 more (gatsby-plugin-react-helmet, gatsby-plugin-sharp, ...)
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\Alexander Chesser\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Alexander Chesser\AppData\Local\npm-cache\_logs\2021-10-30T18_52_57_764Z-debug.log

starting to investigate now, but if @btholt (or anyone) knows what the answer is here it might help me and a lot of people who come after me.

edit: first point confirmed is that eslint on its own fails to install, eslint-config-prettier does not. In this case I've installed without version numbers.

[AlexChesser]

Reading the errors, this looks like when I ran npm i react it may have installed a version greater than the version used in the Gatsby framework?

I can't follow up at an actual computer for another few hours (after I put my kid to sleep) will let you know if I self solve before you get to it.

[AlexChesser]

If if helps - I went through manually updating every package that was angry at me and have now ended up with

{
  "name": "complete-intro-to-react-v6",
  "description": "come learn React with Brian Holt!",
  "version": "6.0.0",
  "author": "Brian Holt <btholt+citrv6@gmail.com>",
  "dependencies": {
    "bootstrap": "^4.5.3",
    "code-mirror-themes": "^1.0.0",
    "front-matter": "^4.0.2",
    "gatsby": "^4.0.2",
    "gatsby-cli": "^4.0.0",
    "gatsby-link": "^2.9.0",
    "gatsby-plugin-layout": "^1.8.0",
    "gatsby-plugin-react-helmet": "^5.0.0",
    "gatsby-plugin-sharp": "^4.0.1",
    "gatsby-remark-autolink-headers": "^2.9.0",
    "gatsby-remark-copy-linked-files": "^2.8.0",
    "gatsby-remark-images": "^6.0.0",
    "gatsby-remark-prismjs": "^3.11.0",
    "gatsby-source-filesystem": "^2.9.0",
    "gatsby-transformer-remark": "^5.0.0",
    "is-url-superb": "^5.0.0",
    "parse-markdown-links": "^1.0.4",
    "prismjs": "^1.23.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0"
  },
  "keywords": [
    "gatsby",
    "gatsby-starter",
    "course",
    "education"
  ],
  "license": "(CC-BY-NC-4.0 OR Apache-2.0)",
  "main": "n/a",
  "scripts": {
    "build": "gatsby build --prefix-paths",
    "csv": "node csv.js",
    "dev": "gatsby develop",
    "format": "prettier --write \"src/**/*.{js,jsx,md,css}\"",
    "lint": "eslint \"src/**/*.{js,jsx}\""
  },
  "devDependencies": {
    "@babel/polyfill": "^7.12.1",
    "babel-eslint": "^10.1.0",
    "core-js": "^3.8.2",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^7.1.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.22.0",
    "prettier": "^2.2.1"
  }
}

the primary set of changes being

with this I'm now able to carry on in the course and was able to install ESLint in the subfolder where I'm going the work.

Reasonably speaking if I'd created a homework folder on the desktop like you said (ew messy) instead of creating it a subfolder of my own fork of this repo, I probably would not have run into this problem.

[AlexChesser]

@btholt ok - I'm able to keep moving forward and have decided to just give up on having my "homework" folder exist as a child of the rest of this repo.

It seems like if I set up my folder structure as

root
|__homework/
|   |__adoptme
|       |__ package.json
|__package.json

running npm <whatever> on the command line from the adoptme folder seems to traverse all the way up to the root folder of the repo and interact in unpleasant ways?

Does that make sense to you? It seems so counter-intuitive to me. I'd love to know if there was a way to make my "child application" think it was a regular standalone application without having it look to interact with stuff multiple levels up in the hierarchy.