Giters

zooniverse / Panoptes-Front-End

Front end for zooniverse/Panoptes

Home Page:https://www.zooniverse.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Build and deploy fails with Node 16.15

eatyourgreens opened this issue · comments

commented

Expected behavior

Builds work with any version of Node 16.

Current behavior

Builds with Node 16.15 fail with unmatched peer dependency errors. It seems that Node 16.15.1/npm 8.11 is more strict about nested dependencies than previous versions.

Panoptes-Front-End odonnell$ npm ci
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: eslint-config-airbnb@17.1.1
npm ERR! Found: eslint-plugin-import@2.16.0
npm ERR! node_modules/eslint-plugin-import
npm ERR!   dev eslint-plugin-import@"~2.16.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer eslint-plugin-import@"^2.18.0" from eslint-config-airbnb@17.1.1
npm ERR! node_modules/eslint-config-airbnb
npm ERR!   dev eslint-config-airbnb@"~17.1.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: eslint-plugin-import@2.26.0
npm ERR! node_modules/eslint-plugin-import
npm ERR!   peer eslint-plugin-import@"^2.18.0" from eslint-config-airbnb@17.1.1
npm ERR!   node_modules/eslint-config-airbnb
npm ERR!     dev eslint-config-airbnb@"~17.1.0" from the root project
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 /Users/odonnell/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/odonnell/.npm/_logs/2022-06-14T15_32_38_682Z-debug-0.log

Steps to replicate

The latest version that I can get to work is Node 16.14 with npm 8.5.

nvm install 16.13
npm ci
nvm install 16.14
npm ci
nvm install 16.15
npm ci
commented

I fixed this in pandora by removing or replacing outdated dependencies: zooniverse/pandora#294

That might not be possible in PFE, which has a much larger dependency tree.

commented

#6154 is a temporary fix that pins Node to 16.13 for builds.

commented

I'm poking around to see if I can find any leads on this issue. Thoughts so far:

  • I just ran nvm install 16.15 , and I can correctly replicate the issue with node 16.15.1 and npm 8.11.0 (macOS's zsh). This is a good starting point
  • Wait, the problem here is with the eslint dependencies? That's interesting, I had similar build issues on Classrooms (#352) and that was a result of eslint-loader, which turns out, wasn't even being used in the code anymore. What is up with these eslint dudes?
commented

Investigation Progress

These are mostly notes for myself so I don't get lost. Feel free to ignore this post.

Part 1: Investigation process

So starting off, ensure we're on the correct baseline - delete node_modules, check we're on the latest master commit (e83dd4e), and check we're using node 16.15(.1 and npm 8.11.0).

Then, run npm ci and we to find out what the problems are:

npm ERR! While resolving: eslint-config-airbnb@17.1.1
npm ERR! Found: eslint-plugin-import@2.16.0
npm ERR! node_modules/eslint-plugin-import
npm ERR!   dev eslint-plugin-import@"~2.16.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer eslint-plugin-import@"^2.18.0" from eslint-config-airbnb@17.1.1
npm ERR! node_modules/eslint-config-airbnb
npm ERR!   dev eslint-config-airbnb@"~17.1.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: eslint-plugin-import@2.26.0
npm ERR! node_modules/eslint-plugin-import
npm ERR!   peer eslint-plugin-import@"^2.18.0" from eslint-config-airbnb@17.1.1
npm ERR!   node_modules/eslint-config-airbnb
npm ERR!     dev eslint-config-airbnb@"~17.1.0" from the root project

Now, the debugging.

  • Analysis: These error messages mean that in package.json, we specified 🅰️ "eslint-config-airbnb": "~17.1.0", and that has 🅱️ eslint-plugin@2.18.0 as a sub-dependency... but we already specified 🅱️ "eslint-plugin-import": "~2.16.0" in package.json. OK, pretty straightforward conflict.
  • Solution: We update package.json to use "eslint-plugin-import": "~2.18.0"

OK, so npm ci will report one (family of) conflicts at a time. Working hypothesis for solving this is to identify which "down the chain" package has conflicts, and find a version that all the "up the chain" packages can agree on.

Repeating this process, I end up with:

"eslint-plugin-import": "~2.18.0",
"eslint-plugin-react": "~7.30.0",

OK, progress. Nothing can go wrong now.

Part 2: Things go wrong

Whoops.

  • We're using "modal-form": "~2.9" which is causing conflict because it's relying on react 16.2, and we've already defined "react": "~17.0.2".
  • Bad news: modal-form is deprecated!
  • Good news: modal-form is ours! (Wait, the npmjs page says I contributed to this? When did that happen?)

Next action: update modal-form to use react 17, bump the version to 2.10, and publish. (I wonder what other repos use modal-form?) Then come back to PFE.

commented

Investigation Progress

Part 3: Things go Un-Wrong

I have a PR that bumps modal-form to v2.10, using React 17: zooniverse/modal-form#50 . This seems to work when tested locally (i.e. have the modal-form repo on my machine then set "modal-form": "file:../modal-form" in package.json).

I'll get that PR ready for review, and publish v2.10 once that's approved/merged, but in the meantime I'm keeping my "modal-form": "file:../modal-form" in this branch, so erm... sorry, Github Actions! You're going to have some headaches.

Next up: package.json: reach-chartist@0.13.3 has chartist@0.10.1 as a sub-dep, but we've defined package.json: chartist@0.11.4

commented

Investigation Progress

Part 4: (deflated charting noises)

New updates:

"react-chartist": "~0.14.4"  // this is the latest version, and only one that supports React 17
"chartist": "~0.10.0"  // bumped DOWN because react-chartist doesn't accept v0.11.x

TODO:

  • Check that charts work properly in PFE
    • chartist is only used in main.styl's @require '../node_modules/chartist/dist/chartist.min.css' but since this is a UI/component thing, it may be very important.
    • react-chartist is used in the project stats

(Hmm I should move these TODOs to an official PR with my debug branch)

Next up: react-translate-component@"~0.15.1" requires React 16. Yokay...

commented

Investigation Process

Part 5: Translate, the first major headache

OK, going to need some help with this next one. Current error is...

npm ERR! (bla bla bla every other component is using react@17.02)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.2.0" from react-interpolate-component@0.12.0
npm ERR! node_modules/react-interpolate-component
npm ERR!   react-interpolate-component@"~0.12.0" from the root project
npm ERR!   peer react-interpolate-component@"^0.12.0" from react-translate-component@0.15.1
npm ERR!   node_modules/react-translate-component
npm ERR!     react-translate-component@"~0.15.1" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: react@16.14.0
npm ERR! node_modules/react
npm ERR!   peer react@"^16.2.0" from react-interpolate-component@0.12.0
npm ERR!   node_modules/react-interpolate-component
npm ERR!     react-interpolate-component@"~0.12.0" from the root project
npm ERR!     peer react-interpolate-component@"^0.12.0" from react-translate-component@0.15.1
npm ERR!     node_modules/react-translate-component
npm ERR!       react-translate-component@"~0.15.1" from the root project

Here's the problem:

  • react-translate-component has been stuck at 0.15.1 for 4 years
  • The dependency is used about 100 files and it provides the <Translate /> component
  • Replacing this seems inevitable (and probably worth me spinning up its own issue or PR) but I need to discuss what's the best way forward for PFE translations dependencies. I don't want to reinvent the wheel since I know we've been doing some major translation work on FEM already.

I'll plonk this on the dev-frontend chat for further discussion.

commented

I’d suggest trying a build with the --legacy-peer-deps flag.

commented

Closed by #6203.